[英]Select with value prop inside of Form.Item won't reflect any change of that value prop
I'm having trouble with antd forms in regard to Select
input.关于
Select
输入,我在使用 antd forms 时遇到问题。 I have two Select
inputs and I need the second input to "reset" to the first option when the first input changes value.我有两个
Select
输入,当第一个输入更改值时,我需要第二个输入“重置”到第一个选项。
I need to keep track of each Select
value with React.useState
because —in my real code— those values are used to make a request to a backend and re-populate other Select
inputs but the first one, and each Select
have a different amount of options, thus is desirable that they get "reset" to the first option.我需要使用
React.useState
跟踪每个Select
值,因为 - 在我的真实代码中 - 这些值用于向后端发出请求并重新填充其他Select
输入,但第一个输入,每个Select
有不同的数量选项,因此希望它们“重置”到第一个选项。
How can I achieve what I'm looking for?我怎样才能实现我正在寻找的东西?
Since you decide to control the input field with value and onChange ,由于您决定使用value和onChange控制输入字段,
You don't need the Form name , remove it.您不需要 Form name ,将其删除。
Then set the first hander, check if the value changed to decide whether set the second to default or not.然后设置第一个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);
If you add Select
into the Form
and Form.Item
and set a name for Form.Item
, the Select
is completely controlled by the Form
.如果在
Form
和Form.Item
中添加Select
并为Form.Item
设置名称,则Select
完全由Form
控制。 You need to use the Form's api to control the Select
or simply remove the name
你需要使用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);
You can check hereCodeSandBox .你可以在这里查看CodeSandBox 。 Hope it helps
希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.