How To Clear Input Value In React Js
- Basic usage
- Three sizes of Input
- Pre / Post tab
- Input Group
- Search box
- Search box with loading
- TextArea
- Autosizing the height to fit the content
- Format Tooltip Input
- prefix and suffix
- Password box
- With clear icon
- Textarea with character counting
- Borderless
- Focus
- API
Input
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
When To Use#
-
A user input in a form field is needed.
-
A search input is required.
Examples
import { Input } from 'antd' ; ReactDOM. render ( < Input placeholder = "Basic usage" /> , mountNode) ; Using pre & post tabs example.
import { Input, Select, Space, Cascader } from 'antd' ; import { SettingOutlined } from '@ant-design/icons' ; const { Option } = Select; const selectBefore = ( < Select defaultValue = "http://" className = "select-before" > < Option value = "http://" > http: / / </ Option > < Option value = "https://" > https: / / </ Option > </ Select > ) ; const selectAfter = ( < Select defaultValue = ".com" className = "select-after" > < Option value = ".com" > .com </ Option > < Option value = ".jp" > .jp </ Option > < Option value = ".cn" > .cn </ Option > < Option value = ".org" > .org </ Option > </ Select > ) ; ReactDOM. render ( < Space direction = "vertical" > < Input addonBefore = "http://" addonAfter = ".com" defaultValue = "mysite" /> < Input addonBefore = {selectBefore} addonAfter = {selectAfter} defaultValue = "mysite" /> < Input addonAfter = { < SettingOutlined /> } defaultValue = "mysite" /> < Input addonBefore = "http://" suffix = ".com" defaultValue = "mysite" /> < Input addonBefore = { < Cascader placeholder = "cascader" style = { { width: 150 } } /> } defaultValue = "mysite" /> </ Space > , mountNode, ) ; .select-before { width : 90px; } .select-after { width : 80px; } [data-theme='compact'] .select-before { width : 71px; } [data-theme='compact'] .select-after { width : 65px; } Example of creating a search box by grouping a standard input with a search button.
import { Input, Space } from 'antd' ; import { AudioOutlined } from '@ant-design/icons' ; const { Search } = Input; const suffix = ( < AudioOutlined style = { { fontSize: 16 , color: '#1890ff' , } } /> ) ; const onSearch = value => console. log (value) ; ReactDOM. render ( < Space direction = "vertical" > < Search placeholder = "input search text" onSearch = {onSearch} style = { { width: 200 } } /> < Search placeholder = "input search text" allowClear onSearch = {onSearch} style = { { width: 200 } } /> < Search addonBefore = "https://" placeholder = "input search text" allowClear onSearch = {onSearch} style = { { width: 304 } } /> < Search placeholder = "input search text" onSearch = {onSearch} enterButton /> < Search placeholder = "input search text" allowClear enterButton = "Search" size = "large" onSearch = {onSearch} /> < Search placeholder = "input search text" enterButton = "Search" size = "large" suffix = {suffix} onSearch = {onSearch} /> </ Space > , mountNode, ) ;
import { Input } from 'antd' ; const { TextArea } = Input; ReactDOM. render ( < TextArea rows = { 4 } /> , mountNode) ; You can use the Input in conjunction with Tooltip component to create a Numeric Input, which can provide a good experience for extra-long content display.
import { Input, Tooltip } from 'antd' ; function formatNumber ( value ) { value += '' ; const list = value. split ( '.' ) ; const prefix = list[ 0 ] . charAt ( 0 ) === '-' ? '-' : '' ; let num = prefix ? list[ 0 ] . slice ( 1 ) : list[ 0 ] ; let result = '' ; while (num.length > 3 ) { result = ` , ${num. slice ( - 3 ) } ${result} ` ; num = num. slice ( 0 , num.length - 3 ) ; } if (num) { result = num + result; } return ` ${prefix} ${result} ${list[ 1 ] ? ` . ${list[ 1 ] } ` : '' } ` ; } class NumericInput extends React.Component { onChange = e => { const { value } = e.target; const reg = / ^-?\d*(\.\d*)?$ / ; if ( ( ! isNaN (value) && reg. test (value) ) || value === '' || value === '-' ) { this .props. onChange (value) ; } } ; // '.' at the end or only '-' in the input box. onBlur = ( ) => { const { value, onBlur, onChange } = this .props; let valueTemp = value; if (value. charAt (value.length - 1 ) === '.' || value === '-' ) { valueTemp = value. slice ( 0 , - 1 ) ; } onChange (valueTemp. replace ( / 0*(\d+) / , '$1' ) ) ; if (onBlur) { onBlur ( ) ; } } ; render ( ) { const { value } = this .props; const title = value ? ( <span className = "numeric-input-title" > {value !== '-' ? formatNumber (value) : '-' } </span > ) : ( 'Input a number' ) ; return ( < Tooltip trigger = { [ 'focus' ] } title = {title} placement = "topLeft" overlayClassName = "numeric-input" > < Input { ... this .props} onChange = { this .onChange} onBlur = { this .onBlur} placeholder = "Input a number" maxLength = { 25 } /> </ Tooltip > ) ; } } class NumericInputDemo extends React.Component { constructor ( props ) { super (props) ; this .state = { value: '' } ; } onChange = value => { this . setState ( { value } ) ; } ; render ( ) { return ( < NumericInput style = { { width: 120 } } value = { this .state.value} onChange = { this .onChange} /> ) ; } } ReactDOM. render ( < NumericInputDemo /> , mountNode) ; /* to prevent the arrow overflow the popup container, or the height is not enough when content is empty */ .numeric-input .ant-tooltip-inner { min-width : 32px; min-height : 37px; } .numeric-input .numeric-input-title { font-size : 14px; }
import { Input, Space } from 'antd' ; import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons' ; ReactDOM. render ( < Space direction = "vertical" > < Input.Password placeholder = "input password" /> < Input.Password placeholder = "input password" iconRender = { visible => (visible ? < EyeTwoTone /> : < EyeInvisibleOutlined /> ) } /> </ Space > , mountNode, ) ;
import { Input } from 'antd' ; const { TextArea } = Input; const onChange = e => { console. log ( 'Change:' , e.target.value) ; } ; ReactDOM. render ( < TextArea showCount maxLength = { 100 } style = { { height: 120 } } onChange = {onChange} /> , mountNode, ) ; Focus with additional option.
import { Input, Space, Button, Switch } from 'antd' ; const Demo = ( ) => { const inputRef = React.useRef<any> ( null ) ; const [input, setInput] = React. useState ( true ) ; const sharedProps = { style: { width: '100%' } , defaultValue: 'Ant Design love you!' , ref: inputRef, } ; return ( < Space direction = "vertical" style = { { width: '100%' } } > < Space wrap > < Button onClick = { ( ) => { inputRef.current! . focus ( { cursor: 'start' , } ) ; } } > Focus at first </ Button > < Button onClick = { ( ) => { inputRef.current! . focus ( { cursor: 'end' , } ) ; } } > Focus at last </ Button > < Button onClick = { ( ) => { inputRef.current! . focus ( { cursor: 'all' , } ) ; } } > Focus to select all </ Button > < Button onClick = { ( ) => { inputRef.current! . focus ( { preventScroll: true , } ) ; } } > Focus prevent scroll </ Button > < Switch checked = {input} checkedChildren = "Input" unCheckedChildren = "TextArea" onChange = { ( ) => { setInput ( !input) ; } } /> </ Space > <br /> {input ? < Input { ...sharedProps} /> : < Input.TextArea { ...sharedProps} /> } </ Space > ) ; } ; ReactDOM. render ( < Demo /> , mountNode) ; There are three sizes of an Input box: large (40px), default (32px) and small (24px).
import { Input } from 'antd' ; import { UserOutlined } from '@ant-design/icons' ; ReactDOM. render ( < > < Input size = "large" placeholder = "large size" prefix = { < UserOutlined /> } /> <br /> <br /> < Input placeholder = "default size" prefix = { < UserOutlined /> } /> <br /> <br /> < Input size = "small" placeholder = "small size" prefix = { < UserOutlined /> } /> </ > , mountNode, ) ; Input.Group example.
Note: You don't need Col to control the width in the compact mode.
import { Input, Button, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader, Tooltip, } from 'antd' ; import { CopyOutlined } from '@ant-design/icons' ; const { Option } = Select; const options = [ { value: 'zhejiang' , label: 'Zhejiang' , children: [ { value: 'hangzhou' , label: 'Hangzhou' , children: [ { value: 'xihu' , label: 'West Lake' , } , ] , } , ] , } , { value: 'jiangsu' , label: 'Jiangsu' , children: [ { value: 'nanjing' , label: 'Nanjing' , children: [ { value: 'zhonghuamen' , label: 'Zhong Hua Men' , } , ] , } , ] , } , ] ; const App = ( ) => ( <div className = "site-input-group-wrapper" > < Input.Group size = "large" > < Row gutter = { 8 } > < Col span = { 5 } > < Input defaultValue = "0571" /> </ Col > < Col span = { 8 } > < Input defaultValue = "26888888" /> </ Col > </ Row > </ Input.Group > <br /> < Input.Group compact > < Input style = { { width: '20%' } } defaultValue = "0571" /> < Input style = { { width: '30%' } } defaultValue = "26888888" /> </ Input.Group > <br /> < Input.Group compact > < Input style = { { width: 'calc(100% - 200px)' } } defaultValue = "https://ant.design" /> < Button type = "primary" > Submit </ Button > </ Input.Group > <br /> < Input.Group compact > < Input style = { { width: 'calc(100% - 200px)' } } defaultValue = "[email protected]:ant-design/ant-design.git" /> < Tooltip title = "copy git url" > < Button icon = { < CopyOutlined /> } /> </ Tooltip > </ Input.Group > <br /> < Input.Group compact > < Select defaultValue = "Zhejiang" > < Option value = "Zhejiang" > Zhejiang </ Option > < Option value = "Jiangsu" > Jiangsu </ Option > </ Select > < Input style = { { width: '50%' } } defaultValue = "Xihu District, Hangzhou" /> </ Input.Group > <br /> < Input.Group compact > < Input.Search allowClear style = { { width: '40%' } } defaultValue = "0571" /> < Input.Search allowClear style = { { width: '40%' } } defaultValue = "26888888" /> </ Input.Group > <br /> < Input.Group compact > < Select defaultValue = "Option1" > < Option value = "Option1" > Option1 </ Option > < Option value = "Option2" > Option2 </ Option > </ Select > < Input style = { { width: '50%' } } defaultValue = "input content" /> < InputNumber /> </ Input.Group > <br /> < Input.Group compact > < Input style = { { width: '50%' } } defaultValue = "input content" /> < DatePicker style = { { width: '50%' } } /> </ Input.Group > <br /> < Input.Group compact > < Input style = { { width: '30%' } } defaultValue = "input content" /> < DatePicker.RangePicker style = { { width: '70%' } } /> </ Input.Group > <br /> < Input.Group compact > < Select defaultValue = "Option1-1" > < Option value = "Option1-1" > Option1- 1 </ Option > < Option value = "Option1-2" > Option1- 2 </ Option > </ Select > < Select defaultValue = "Option2-2" > < Option value = "Option2-1" > Option2- 1 </ Option > < Option value = "Option2-2" > Option2- 2 </ Option > </ Select > </ Input.Group > <br /> < Input.Group compact > < Select defaultValue = "1" > < Option value = "1" > Between </ Option > < Option value = "2" > Except </ Option > </ Select > < Input style = { { width: 100 , textAlign: 'center' } } placeholder = "Minimum" /> < Input className = "site-input-split" style = { { width: 30 , borderLeft: 0 , borderRight: 0 , pointerEvents: 'none' , } } placeholder = "~" disabled /> < Input className = "site-input-right" style = { { width: 100 , textAlign: 'center' , } } placeholder = "Maximum" /> </ Input.Group > <br /> < Input.Group compact > < Select defaultValue = "Sign Up" style = { { width: '30%' } } > < Option value = "Sign Up" > Sign Up </ Option > < Option value = "Sign In" > Sign In </ Option > </ Select > < AutoComplete style = { { width: '70%' } } placeholder = "Email" options = { [ { value: 'text 1' } , { value: 'text 2' } ] } /> </ Input.Group > <br /> < Input.Group compact > < Select style = { { width: '30%' } } defaultValue = "Home" > < Option value = "Home" > Home </ Option > < Option value = "Company" > Company </ Option > </ Select > < Cascader style = { { width: '70%' } } options = {options} placeholder = "Select Address" /> </ Input.Group > </div > ) ; ReactDOM. render ( < App /> , mountNode) ; .site-input-group-wrapper .site-input-split { background-color : #fff ; } .site-input-group-wrapper .site-input-right { border-left-width : 0 ; } .site-input-group-wrapper .site-input-right :hover, .site-input-group-wrapper .site-input-right :focus { border-left-width : 1px; } .site-input-group-wrapper .ant-input-rtl.site-input-right { border-right-width : 0 ; } .site-input-group-wrapper .ant-input-rtl.site-input-right :hover, .site-input-group-wrapper .ant-input-rtl.site-input-right :focus { border-right-width : 1px; } Search loading when onSearch.
import { Input } from 'antd' ; const { Search } = Input; ReactDOM. render ( < > < Search placeholder = "input search loading default" loading /> <br /> <br /> < Search placeholder = "input search loading with enterButton" loading enterButton /> <br /> <br /> < Search placeholder = "input search text" enterButton = "Search" size = "large" loading /> </ > , mountNode, ) ; autoSize prop for a textarea type of Input makes the height to automatically adjust based on the content. An option object can be provided to autoSize to specify the minimum and maximum number of lines the textarea will automatically adjust.
import { Input } from 'antd' ; const { TextArea } = Input; class Demo extends React.Component { state = { value: '' , } ; onChange = ( { target: { value } } ) => { this . setState ( { value } ) ; } ; render ( ) { const { value } = this .state; return ( < > < TextArea placeholder = "Autosize height based on content lines" autoSize /> <div style = { { margin: '24px 0' } } /> < TextArea placeholder = "Autosize height with minimum and maximum number of lines" autoSize = { { minRows: 2 , maxRows: 6 } } /> <div style = { { margin: '24px 0' } } /> < TextArea value = {value} onChange = { this .onChange} placeholder = "Controlled autosize" autoSize = { { minRows: 3 , maxRows: 5 } } /> </ > ) ; } } ReactDOM. render ( < Demo /> , mountNode) ; ￥ RMB
￥ RMB
Add a prefix or suffix icons inside input.
import { Input, Tooltip } from 'antd' ; import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons' ; ReactDOM. render ( < > < Input placeholder = "Enter your username" prefix = { < UserOutlined className = "site-form-item-icon" /> } suffix = { < Tooltip title = "Extra information" > < InfoCircleOutlined style = { { color: 'rgba(0,0,0,.45)' } } /> </ Tooltip > } /> <br /> <br /> < Input prefix = "￥" suffix = "RMB" /> <br /> <br /> < Input prefix = "￥" suffix = "RMB" disabled /> </ > , mountNode, ) ; Input box with the remove icon, click the icon to delete everything.
import { Input } from 'antd' ; const { TextArea } = Input; const onChange = e => { console. log (e) ; } ; ReactDOM. render ( < > < Input placeholder = "input with clear icon" allowClear onChange = {onChange} /> <br /> <br /> < TextArea placeholder = "textarea with clear icon" allowClear onChange = {onChange} /> </ > , mountNode, ) ;
import { Input } from 'antd' ; ReactDOM. render ( < Input placeholder = "Borderless" bordered = { false } /> , mountNode) ; API#
Input#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | |
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| bordered | Whether has border style | boolean | true | 4.5.0 |
| defaultValue | The initial input content | string | - | |
| disabled | Whether the input is disabled | boolean | false | |
| id | The ID for input | string | - | |
| maxLength | The max length | number | - | |
| prefix | The prefix icon for the Input | ReactNode | - | |
| size | The size of the input box. Note: in the context of a form, the large size is used | large | middle | small | - | |
| suffix | The suffix icon for the Input | ReactNode | - | |
| type | The type of input, see: MDN( use Input.TextArea instead of type="textarea") | string | text | |
| value | The input content value | string | - | |
| onChange | Callback when user input | function(e) | - | |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |
When
Inputis used in aForm.Itemcontext, if theForm.Itemhas theidandoptionsprops defined thenvalue,defaultValue, andidprops ofInputare automatically set.
The rest of the props of Input are exactly the same as the original input.
Input.TextArea#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| autoSize | Height autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 } | boolean | object | false | |
| bordered | Whether has border style | boolean | true | 4.5.0 |
| defaultValue | The initial input content | string | - | |
| maxLength | The max length | number | - | 4.7.0 |
| showCount | Whether show text count | boolean | { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
| value | The input content value | string | - | |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |
| onResize | The callback function that is triggered when resize | function({ width, height }) | - |
The rest of the props of Input.TextArea are the same as the original textarea.
Input.Search#
| Property | Description | Type | Default |
|---|---|---|---|
| enterButton | Whether to show an enter button after input. This property conflicts with the addonAfter property | boolean | ReactNode | false |
| loading | Search box with loading | boolean | false |
| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
Supports all props of Input.
Input.Group#
| Property | Description | Type | Default |
|---|---|---|---|
| compact | Whether use compact style | boolean | false |
| size | The size of Input.Group specifies the size of the included Input fields. Available: large default small | string | default |
<Input.Group > <input /> <input /> </Input.Group > Input.Password#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? < EyeOutlined /> : < EyeInvisibleOutlined />) | 4.3.0 |
| visibilityToggle | Whether show toggle button | boolean | true |
Input Methods#
| Name | Description | Parameters | Version |
|---|---|---|---|
| blur | Remove focus | - | |
| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 |
FAQ#
Why Input lose focus when change prefix/suffix #
When Input dynamic add or remove prefix/suffix will make React recreate the dom structure and new input will be not focused. You can set an empty <span /> element to keep the dom structure:
const suffix = condition ? <Icon type = "smile" /> : <span /> ; <Input suffix = {suffix} /> ; Why TextArea in control can make value exceed maxLength?#
When in control, component should show as what it set to avoid submit value not align with store value in Form.
How To Clear Input Value In React Js
Source: https://ant.design/components/input/
Posted by: hansenglin1947.blogspot.com
0 Response to "How To Clear Input Value In React Js"
Post a Comment