我应该如何更新 Redux 表单 Select 字段选项

Question

在我的项目中，我需要根据某些条件更新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 事件中，我们可以检查表单值是否在选项中。任何人都可以就如何执行此操作提供一些建议吗？

这是我的 select 组件：

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;

Answer 1

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

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;

我应该如何更新 Redux 表单 Select 字段选项

How should I update Redux Form Select Field Options

reactjs

redux

redux-form