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

Question

我是使用redux-form中的field-arrays，并且需要在我的表单中添加一个可搜索的下拉菜单。我知道一个普通的下拉菜单可以这样实现，

<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样式来使其与其他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中是否可能拥有可搜索的下拉列表？

- Niveditha Karmegam

---

你可以查看下面的例子： https://jedwatson.github.io/react-select/ - suresh kumar

我建议您使用“自动完成”下拉菜单。 - Ashh

Answer 1

回答自己的问题，最终我发现不能在redux-form中使用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" 
  />

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

- Niveditha Karmegam

---

如果我四天前就发现了这个问题该多好啊，感谢IIT女孩。 - Tajveer Singh Nijjar

Answer 2

React 中有 react-select 包，提供了可搜索功能。

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

关注GitHub上的内容

- mhnpd

---

谢谢您的回答，但我已经在使用react-select包。我的问题是如何在redux-form中使用react-select。 - Niveditha Karmegam

在 Redux Form 中，可以像更改、提交等操作一样分发动作。在 onChange 时，您必须在更改时使用数据触发与表单相关联的动作。 - mhnpd

是的，我知道。但我不确定如何使用fieldarrays在redux-form中更新状态。由于我没有直接与状态交互，到目前为止，fieldarray正在弹出和添加项目到状态中。至少这是我目前的理解。 - Niveditha Karmegam