Question

在我的项目中，我需要根据某些条件更新“选择字段选项”，但这会引起问题。例如，以前的选项是

[{ 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;

Answer 1

我找到了解决此问题的方法。我添加了DynamicOptionsFlag来标记那些字段可能会更改选项。然后，在呈现选择字段时，我将检查输入值是否在options数组中。否则，该值将更新为“”。

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 Form Select Field Options

1 个答案: