我应该如何更新 Redux 表单选择字段选项答案

【问题标题】：How should I update Redux Form Select Field Options我应该如何更新 Redux 表单选择字段选项
【发布时间】：2019-06-17 21:58:25
【问题描述】：

在我的项目中，我需要根据一些条件更新Select Field Options，但这会导致问题。例如，前面的选项是

[{ text: "a", value: "a" }, { text: "b", value: "b" }],

和用户选择：

{ text: "a", value: "a" }.

然后根据一些条件，选项变为

[{ text: "c", value: "c" }, { text: "d", value: "d" }]。

但是，redux 表单中该字段的值仍然是{ text: "a", value: "a" }。

这将在提交表单时发送错误的数据。

无论如何我可以在全球范围内处理这个问题吗？因为这种情况在我的项目中很常见。

我在想，在 select onChange 事件中，我们可以检查表单值是否在选项中。谁能提供一些关于如何做到这一点的建议？

这是我的选择组件：

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldSelect = ({
  input,
  label,
  placeholder,
  options,
  required,
  meta: { touched, error, warning }
}) => (
  <Popup
    trigger={
      <Form.Select
        {...input}
        label={label}
        onChange={(e, { value }) => input.onChange(value)}
        options={options}
        placeholder={placeholder}
        error={error ? true : null}
        required={required === "Y" ? true : null}
        fluid
      />
    }
    flowing
    hoverable
  >
    <Tooltip touched={touched} error={error} warning={warning} />
  </Popup>
);

export default RenderFieldSelect;

【问题讨论】：

不知道你为什么想要那个，但你可以在 onChange 处理程序中使用 redux 表单提供的change()，这将改变你的特定字段数据。你可以阅读更多redux-form.com/8.2.2/docs/api/props.md/…
@Eliran，感谢您的回复。因为根据另一个选择字段的值，这个选择的选项会被更新。这是业务请求。

标签： reactjs redux redux-form

【解决方案1】：

我已经找到了解决这个问题的方法。我添加了一个 DynamicOptionsFlag 来标记这些字段可能会更改选项。然后在渲染选择字段时，我会检查输入值是否在选项数组中。如果不是，则该值将更新为 ""。

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldSelect = ({
  input,
  label,
  placeholder,
  options,
  DynamicOptionsFlag,
  required,
  meta: { touched, error, warning }
}) => {
  if (DynamicOptionsFlag==="Y") {
    let flag = false;
    for (let option of options) {
      if (option["value"] === input["value"]) {
        flag = true;
        break;
      }
    }
    if (!flag) {
      input.onChange("");
    }
    }

  return (
    <Popup
      trigger={
        <Form.Select
          {...input}
          label={label}
          onChange={(e, { value }) => input.onChange(value)}
          options={options}
          placeholder={placeholder}
          error={error ? true : null}
          required={required === "Y" ? true : null}
          fluid
        />
      }
      flowing
      hoverable
    >
      <Tooltip touched={touched} error={error} warning={warning} />
    </Popup>
  );
};
export default RenderFieldSelect;

【讨论】：