[英]Select with value prop inside of Form.Item won't reflect any change of that value prop
由於您決定使用value和onChange控制輸入字段,
您不需要 Form name ,將其刪除。
然后設置第一個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);
如果在Form
和Form.Item
中添加Select
並為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 。 希望能幫助到你
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.