在 Form.Item 内使用 value 道具选择不会反映该 value 道具的任何变化答案

【问题标题】：Select with value prop inside of Form.Item won't reflect any change of that value prop在 Form.Item 内使用 value 道具选择不会反映该 value 道具的任何变化
【发布时间】：2020-04-04 15:49:18
【问题描述】：

关于Select 输入，我在使用antd 表单时遇到问题。我有两个 Select 输入，当第一个输入更改值时，我需要第二个输入“重置”到第一个选项。

我需要使用React.useState 跟踪每个Select 值，因为——在我的真实代码中——这些值用于向后端发出请求并重新填充其他Select 输入，但第一个输入，并且每个Select 都有不同数量的选项，因此最好将它们“重置”为第一个选项。

我怎样才能实现我想要的？

【问题讨论】：

不确定所需的行为。您能添加预期结果和实际结果吗？

标签： javascript html reactjs antd

【解决方案1】：

由于您决定使用 value 和 onChange 来控制输入字段，

您不需要表单名称，请将其删除。

然后设置第一个hander，检查值是否改变决定第二个是否设置为默认值。

import React from "react";
import ReactDOM from "react-dom";
import { Select, Form } from "antd";
import "antd/dist/antd.css";

const fieldA = [{ value: 1, text: "Hello" }, { value: 2, text: "World" }];
const fieldB = [{ value: 1, text: "A" }, { value: 2, text: "B" }];

const App = () => {
  const [valueA, setValueA] = React.useState(null);
  const [valueB, setValueB] = React.useState(null);
  const setFieldA = (value: number) => {
    if (valueA !== value) {
      setValueB(null);
    }
    setValueA(value);
  };

  const setFieldB = (value: number) => {
    setValueB(value);
  };

  return (
    <Form layout="vertical">
      <Form.Item label="Field A">
        <Select value={valueA} onChange={setFieldA}>
          {fieldA.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="Field B">
        <Select value={valueB} onChange={setFieldB}>
          {fieldB.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <div>
        Field A "real" value: {valueA}
        <br />
        Field B "real" value: {valueB}
      </div>
    </Form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：

【解决方案2】：

如果将Select 添加到Form 和Form.Item 并为Form.Item 设置名称，则Select 完全由Form 控制。你需要使用Form的api来控制Select或者干脆去掉name

import React from "react";
import ReactDOM from "react-dom";
import { Select, Form } from "antd";
import "antd/dist/antd.css";

const fieldA = [{ value: 1, text: "Hello" }, { value: 2, text: "World" }];
const fieldB = [{ value: 1, text: "A" }, { value: 2, text: "B" }];

const App = () => {
  const [myvalues, setMyvalues] = React.useState({ valueA: 1, valueB: 1 });
  const setFieldA = (value: number) => {
    setMyvalues({ valueA: value, valueB: 1 });
    form.setFieldsValue({ valueA: value, valueB: 1 });
  };
  const setFieldB = (value: number) => {
    setMyvalues({ ...myvalues, valueB: value });
    form.setFieldsValue({ ...myvalues, valueB: value });
  };
  const [form] = Form.useForm();
  return (
    <Form layout="vertical" form={form} initialValues={myvalues}>
      <Form.Item name="valueA" label="Field A" shouldUpdate>
        <Select value={myvalues.valueA} onChange={setFieldA}>
          {fieldA.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item name="valueB" label="Field B" shouldUpdate>
        <Select value={myvalues.valueB} onChange={setFieldB}>
          {fieldB.map(field => (
            <Select.Option value={field.value}>{field.text}</Select.Option>
          ))}
        </Select>
      </Form.Item>
      <div>
        Field A "real" value: {myvalues.valueA}.<br />
        Field B "real" value: {myvalues.valueB}
      </div>
    </Form>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以在这里查看CodeSandBox。希望对你有帮助

【讨论】：