Question

我正在使用Redux-form，我有一个正常的下拉列表

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

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

我有几种方法可以做但不确定什么是最好的。

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

每当我输入过滤字段时，我都可以在select上调用onChange事件。

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

更好的东西???

Answer 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中与第三方表单组件集成。

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

1 个答案: