![dumi](https://camo.githubusercontent.com/088249453242a838d954f1e099aacde7ed31858166a2e7769d97dab9f62deb1c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f637325323062792d64756d692d626c75653f7374796c653d666c61742d737175617265)
![rc-input](https://camo.githubusercontent.com/4c2d20c76c6f93db9e34c807fa244b5b0cccb5d87899f272ee5ea3938ddd4efa/68747470733a2f2f6e6f6465692e636f2f6e706d2f72632d696e7075742e706e67)
import Input from 'rc-input';
import { render } from 'react-dom';
render(<Input placeholder="input" allowClear />, mountNode);
Property |
Type |
Default |
Description |
prefixCls |
string |
rc-input |
|
className |
string |
'' |
additional class name of input |
style |
React.CSSProperties |
|
style properties of input |
affixWrapperClassName |
string |
- |
className with 'rc-input-affix-wrapper' |
groupClassName |
string |
- |
className with 'rc-input-group-wrapper' |
wrapperClassName |
string |
- |
className with 'rc-input-wrapper' |
addonAfter |
ReactNode |
- |
The label text displayed after (on the right side of) the input field |
addonBefore |
ReactNode |
- |
The label text displayed before (on the left side of) the input field |
allowClear |
boolean | { clearIcon: ReactNode } |
false |
If allow to remove input content with clear icon |
bordered |
boolean |
true |
Whether has border style |
defaultValue |
string |
- |
The initial input content |
disabled |
boolean |
false |
Whether the input is disabled |
id |
string |
- |
The ID for input |
maxLength |
number |
- |
The max length |
showCount |
boolean | { formatter: ({ value: string, count: number, maxLength?: number }) => ReactNode } |
false |
Whether show text count |
prefix |
ReactNode |
- |
The prefix icon for the Input |
suffix |
ReactNode |
- |
The suffix icon for the Input |
type |
string |
text |
The type of input, see: MDN( use Input.TextArea instead of type="textarea" ) |
value |
string |
- |
The input content value |
onChange |
function(e) |
- |
Callback when user input |
onPressEnter |
function(e) |
- |
The callback function that is triggered when Enter key is pressed |
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();// the input will get focus
inputRef.current.blur();// the input will lose focus
console.log(inputRef.current.input);// The origin input element
}, []);
// ....
<Input ref={inputRef} />
Property |
Type |
Description |
focus |
(options?: InputFocusOptions) => void |
The input get focus when called |
blur |
() => void |
The input loses focus when called |
input |
HTMLInputElement | null |
The origin input element |
rc-input is released under the MIT license.