On the Select problem antd

for example, in the following demo code, there is no 888 in the 888 focus option when I type it. After losing focus, the 888 just entered will be emptied automatically. If I want to keep the entered 888 in the input box and get this value, how can I get this value? 

<Select
    placeholder=""
    showSearch={true}
    onChange={this.onChange}
    allowClear={true}
  >
    <Option value="test0">test0</Option>
    <Option value="test1">test1</Option>
    <Option value="test2">test2</Option>
</Select>
Antd react.js
Apr.16,2021

you try AutoComplete document

the content searched by select can only be within the option range. You can use AutoComplete (automatic completion) to try

if this attribute notFoundContent drop-down list does not match, you can store the value you entered in state. This notFoundContent= {fetching? < Spin size= "small" / >: this.state.value} is found on the official website. You can try to change it according to your needs.

I looked at it and used the onSearch and value, in the component to store the value in state. When assigning the value, I made a judgment. The blur did not match to the empty value, so judge whether it is empty or not. 

<Select
            placeholder=""
            showSearch={true}
            onSearch={this.onChange}
            onChange={this.onChange}
            allowClear={true}
            value={this.state.value}
          >
            <Select.Option value='test0'>test0</Select.Option>
            <Select.Option value='test1'>test1</Select.Option>
            <Select.Option value='test2'>test2</Select.Option>
          </Select>
onChange=(value)=>{
      if(value!="") this.setState({value})
  }

change the mode property of the Select component to combobox, and the test is valid.
clipboard.png

Previous: How quilljs inserts a custom dom structure

Next: Is there a limit on the number of characters in the IOS scan QR code?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu