如何在 Redux-form 中有可搜索的下拉菜单

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 select，我如何才能将 css 样式应用于此以使其与其他 bootstrap 相匹配元素?

要有一个可搜索的下拉列表，我正在使用 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-form 中有可搜索的下拉列表？

Answer 1

有 react-select 包提供可搜索的功能

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

关注github

Answer 2

回答我自己的问题，最后我发现我不能使用带有 redux-form 的 react-select 包。

当值被 selected 时，它被添加到 react-store 但在事件模糊时丢失了值。发生这种情况是因为 redux-form onBlur 事件触发了一个动作，该动作在其有效负载中传递了 null。为了避免这种情况，github issue thread

中提到了几个解决方案

通过定义自定义方法来处理 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" 
  />

希望这对其他人有所帮助！

如何在 Redux-form 中有可搜索的下拉菜单

How to have searchable dropdown in Redux-form

javascript

reactjs

react-select

redux-form

react-redux