ReduxForm 选择值选项被过滤器删除，但选项保持选中状态答案

【问题标题】：ReduxForm select value option is removed by filter, but option remains selectedReduxForm 选择值选项被过滤器删除，但选项保持选中状态
【发布时间】：2017-09-15 01:36:38
【问题描述】：

我正在使用 Redux-form，并且我有一个正常的下拉菜单

列表中有 3 个选项。选项1 选项 2 选项 3 我选择选项 3。然后我进入我的过滤器输入字段并输入 1。现在列表只包含选项 1。但是表单状态下仍然选择了选项3。

如何让表单更新并意识到该选项不再在列表中并转到默认值？

我考虑过几种方法，但不确定哪种方法最好。

我可以在 formReducer.plugin 中使用 /CHANGE 操作类型和过滤器字段编写一些状态更改逻辑。

每当我在过滤器字段中键入内容时，我也许可以在 select 上调用 onChange 事件。

如果当前状态选择的值在列表中，我总是可以检查 select 组件渲染函数，如果没有，则在 select 上调用 redux-form 更改操作为 undefined。

更好的东西？？？

【问题讨论】：

添加一些示例代码。我将提供一个猜测答案，但没有代码，这真的只是一个猜测。

标签： select filter react-redux redux-form

【解决方案1】：

如果您使用某些组件进行选择，那么您需要覆盖 onChange 属性以确保您的组件获得 onChange 事件以及 redux-form 字段 input。

export const renderSelect = ({input, meta: { touched, error }, ...rest}) => {
    return <Form.Select  {...input} {...rest}
         onChange={ (event, data) => { input.onChange(data.value);}}
    />
};

const MyFormComponent = (props) => {
  const {brandData, productData, groupData} = props.optionsData;
  return (
    <Form>
      <Field name='brandData' options={brandData} component={renderSelect}/>
      <Field name='productData' options={productData} component={renderSelect}/>
      <Field name='groupData' options={groupData} component={renderSelect}/>
    </Form>
  );
};

您可以在redux-form 示例中看到类似的操作，用于在其material-ui example 中与第 3 方表单组件集成。

【讨论】：