我在使用 antd 表单时遇到关于 Select
的问题输入。我有两个Select
输入,当第一个输入更改值时,我需要第二个输入“重置”到第一个选项。
我需要跟踪每个 Select
值 React.useState
因为在我的真实代码中,这些值用于向后端发出请求并重新填充其他 Select
输入但第一个,并且每个 Select
有不同数量的选项,因此最好将它们“重置”为第一个选项。
我怎样才能实现我想要的目标?
最佳答案
由于您决定使用 value 和 onChange 控制输入字段,
您不需要表单名称,请将其删除。
然后设置第一个hander,检查值是否改变来决定是否将第二个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);
关于javascript - 在 Form.Item 内使用 value 属性进行选择不会反射(reflect)该 value 属性的任何更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61023425/