如何在Redux表單中獲取可搜索的下拉列表

Question

我正在使用redux-form的字段數組，我需要一個可搜索的下拉菜單。 我知道正常的下拉可以這樣做，

<Field name={`${object}.method`} component="select" validate={required} id={`${object}.key`}>
       <option value="id">id</option>
       <option value="css">css</option>
       <option value="xpath">xpath</option>
       <option value="binding">binding</option>
       <option value="model">model</option>
</Field>

但這不是可搜索的下拉列表。 即使我要使用它，這只是給出一個基本的html選擇，我如何能夠將css樣式應用於此以使其與其他引導元素匹配？

要有一個可搜索的下拉列表，我正在使用react-select包。 我試圖做的是;

<Field
    name={`${object}.method`}
    type='text'
    component={this.renderDropdown}
    label="Method"
    validate={required}
    id={`${object}.key`}
    valueField='value'
/>

renderDropdown = ({ input, id, valueField, meta: { touched, error }, ...props }) => {
    return (
        <React.Fragment>
            <div className='align-inline object-field-length'>
                <Select {...input} id={id} value={input.value.value} onChange={input.onChange}
                    options={[
                        { value: 'id', label: 'id' },
                        { value: 'css', label: 'css' },
                        { value: 'xpath', label: 'xpath' },
                        { value: 'binding', label: 'binding' },
                        { value: 'model', label: 'model' },
                    ]}
                />
            </div>
        </React.Fragment>
    )
};

這不能正常工作， 只有當下拉列表處於活動狀態時 （點擊它時）， 該值才會存儲在redux-store中 ，在事件模糊時，這會丟失該值。

我在這做錯了什么？

是否有可能以redux形式提供可搜索的下拉列表？

Answer 1

回答我自己的問題，最后我想我不能使用帶反射形式的react-select包。

當選擇該值時，它將被添加到react-store但在事件模糊時丟失值。 發生這種情況是因為redux-form onBlur事件觸發了一個動作，該動作在其有效載荷中傳遞null。 為了避免這種情況， github問題線程中提到了一些解決方案

通過定義一個自定義方法來處理onBlur為我做了它;

renderDropdown = ({ input, onBlur, id, meta: { touched, error }, ...props }) => {

 const handleBlur = e => e.preventDefault();

    return (
        <React.Fragment>
            <Select {...input}
                id="object__dropdown--width"
                options={allRepos}
                onChange={input.onChange}
                onBlur={handleBlur} 
            />
        </React.Fragment>
    )
}



  <Field name="listAllRepo" 
      value="this.state.accountno" 
      component={this.renderDropdown} 
      placeholder="Select" 
  />

希望這對其他人有幫助！

Answer 2

有反應選擇包反應，提供可搜索的功能

 <Select name="form-field-name" value={value} onChange={this.handleChange} options={[ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' }, ]} searchable={true} /> 

關注github