Antd提供了一个名为"Form.List"的组件,可以用来渲染多个表单元素并动态添加/删除元素。我们可以监听"Form.List"的value更改事件来根据当前值更改表单元素。
以下是一个示例代码,展示了如何根据一个复选框的当前值更改表单元素:
import React from "react";
import { Form, Checkbox, Input, Button } from "antd";
function DynamicForm() {
const initialValues = {
useInput2: false,
input1: "",
input2: ""
};
const handleSubmit = (values) => {
console.log(values);
};
const handleCheckboxChange = (event) => {
const useInput2 = event.target.checked;
// 改变表单内容
form.setFieldsValue({ useInput2, input2: "" });
};
const handleInputsChange = (changedValues, allValues) => {
// 如果复选框被选中并且输入框2的值为空,则将输入框2的规则改为必填
if (allValues.useInput2 && allValues.input2 === "") {
form.setFieldsValue({
input2: "",
});
form.setFields([
{
name: ["input2"],
value: "",
rules: [{ required: true, message: "请输入 input2!" }] // 可以根据实际需求修改规则
},
]);
}
};
const [form] = Form.useForm();
return (
{(fields) => (
<>
{fields.map((field) => (