File tree Expand file tree Collapse file tree 7 files changed +97
-26
lines changed
Expand file tree Collapse file tree 7 files changed +97
-26
lines changed Original file line number Diff line number Diff line change 1+ import React from 'react' ;
2+ import { Space } from 'antd' ;
3+ import { Input } from 'dt-react-component' ;
4+
5+ export default ( ) => {
6+ return (
7+ < Space direction = "vertical" >
8+ < Input
9+ style = { { width : 500 } }
10+ placeholder = "输入中文回车不会触发 onPressEnter 事件"
11+ onPressEnter = { ( ) => alert ( '触发' ) }
12+ />
13+ < Input
14+ style = { { width : 500 } }
15+ placeholder = "任意回车均触发 onPressEnterNative 事件"
16+ onPressEnterNative = { ( ) => alert ( '触发' ) }
17+ />
18+ </ Space >
19+ ) ;
20+ } ;
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change 1+ ---
2+ title : Match 输入框
3+ group : 组件
4+ toc : content
5+ demo :
6+ cols : 2
7+ ---
8+
9+ # Match 输入框
10+
11+ ## 何时使用
12+
13+ 需要用户输入表单域内容时。
14+
15+ ## 示例
16+
17+ <code src =" ./demos/match/basic.tsx " title =" 基础使用 " description =" 通过回车键触发 onSearch 事件 " ></code >
18+ <code src =" ./demos/match/filterOptions.tsx " title =" 控制匹配项 " description =" 仅支持头部匹配 " ></code >
19+
20+ ## API
21+
22+ ### 类型
23+
24+ | 参数 | 说明 | 类型 | 默认值 |
25+ | ------------- | -------------------- | -------------------------------------------------- | -------------- |
26+ | searchType | 当前匹配项 | ` SearchType ` |
27+ | filterOptions | 过滤匹配项数组 | ` SearchType[] ` | ` SearchType[] ` |
28+ | onTypeChange | 匹配项修改的回调函数 | ` (type: SearchType) => void; ` | - |
29+ | onSearch | 搜索的回调函数 | ` (value: string, searchType: SearchType) => void; ` | - |
30+
31+ ### SearchType
32+
33+ ` type SearchType = 'fuzzy' | 'caseSensitive' | 'precise' | 'front' | 'tail'; `
34+
35+ | 参数 | 说明 |
36+ | ------------- | ---------- |
37+ | fuzzy | 无选中状态 |
38+ | caseSensitive | 大小写敏感 |
39+ | precise | 精准查询 |
40+ | front | 头部匹配 |
41+ | tail | 尾部匹配 |
Original file line number Diff line number Diff line change 11---
2- title : Input.Match 输入框
2+ title : Input 输入框
33group : 组件
44toc : content
55demo :
66 cols : 2
77---
88
9- # Input.Match 输入框
9+ # Input 输入框
1010
1111## 何时使用
1212
13- 需要用户输入表单域内容时 。
13+ 需要用户输入内容时 。
1414
1515## 示例
1616
17- <code src =" ./demos/basic.tsx " title =" 基础使用 " description =" 通过回车键触发 onSearch 事件 " ></code >
18- <code src =" ./demos/filterOptions.tsx " title =" 控制匹配项 " description =" 仅支持头部匹配 " ></code >
17+ <code src =" ./demos/input/basic.tsx " title =" 基础使用 " description =" 通过回车键触发 onSearch 事件 " ></code >
1918
2019## API
2120
2221### 类型
2322
24- | 参数 | 说明 | 类型 | 默认值 |
25- | ------------- | -------------------- | -------------------------------------------------- | -------------- |
26- | searchType | 当前匹配项 | ` SearchType ` |
27- | filterOptions | 过滤匹配项数组 | ` SearchType[] ` | ` SearchType[] ` |
28- | onTypeChange | 匹配项修改的回调函数 | ` (type: SearchType) => void; ` | - |
29- | onSearch | 搜索的回调函数 | ` (value: string, searchType: SearchType) => void; ` | - |
23+ | 参数 | 说明 | 类型 | 默认值 |
24+ | ------------------ | ---------------------- | ---------- | ------ |
25+ | onPressEnter | 输入英文回车的回调函数 | ` Function ` |
26+ | onPressEnterNative | 输入任意回车的回调函数 | ` Function ` | |
3027
31- ### SearchType
32-
33- ` type SearchType = 'fuzzy' | 'caseSensitive' | 'precise' | 'front' | 'tail'; `
34-
35- | 参数 | 说明 |
36- | ------------- | ---------- |
37- | fuzzy | 无选中状态 |
38- | caseSensitive | 大小写敏感 |
39- | precise | 精准查询 |
40- | front | 头部匹配 |
41- | tail | 尾部匹配 |
28+ 其余属性均继承自 ` Input ` 组件,参考 [ Input API] ( https://4x.ant.design/components/input-cn/#Input )
Original file line number Diff line number Diff line change 1- import { Input } from 'antd' ;
2-
1+ import InternalInput from './internalInput' ;
32import InternalMatch from './match' ;
43
5- type OriginInputType = typeof Input ;
4+ type OriginInputType = typeof InternalInput ;
65interface InputInterface extends OriginInputType {
76 Match : typeof InternalMatch ;
87}
98
10- const WrapperInput = Input ;
9+ const WrapperInput = InternalInput ;
1110
1211( WrapperInput as InputInterface ) . Match = InternalMatch ;
1312
Original file line number Diff line number Diff line change 1+ import React from 'react' ;
2+ import { Input , type InputProps } from 'antd' ;
3+
4+ export interface IInternalInputProps extends InputProps {
5+ onPressEnterNative ?: InputProps [ 'onPressEnter' ] ;
6+ }
7+
8+ export default function InternalInput ( {
9+ onPressEnterNative,
10+ onPressEnter,
11+ ...rest
12+ } : IInternalInputProps ) {
13+ return (
14+ < Input
15+ { ...rest }
16+ onPressEnter = { ( e ) => {
17+ if ( e . keyCode === 13 ) {
18+ onPressEnter ?.( e ) ;
19+ }
20+ onPressEnterNative ?.( e ) ;
21+ } }
22+ />
23+ ) ;
24+ }
You can’t perform that action at this time.
0 commit comments