ant design - 使用 Form.setFieldsValue 更新 Form.Item 内复选框的选中值

Question

我有一个接收状态对象的 React Form 组件。该 Form 包含几个 Form.Item 组件，一个 antd Input 和一个 antd Checkbox。我的表单组件中有以下代码：

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  useEffect(() => {
    debugger;
    recordComponentForm.setFieldsValue({
      Title: selectedRecord ? selectedRecord.Title : null,
      IsCurrentRecord: selectedRecord ? selectedRecord.IsCurrentRecord : true,
    });
  }, [recordComponentForm, selectedRecord]);

  return (
    <Form
      name="seasonForm"
      autoComplete="off"
      layout={"inline"}
      form={recordComponentForm}
    >
      <Form.Item
        label="Title"
        name="Title"
        rules={[{ required: true, message: "Add a Title" }]}
      >
        <Input
          name="Title"
          placeholder="Season Title"
        />
      </Form.Item>

      <Form.Item
        label="Is Active Record"
        name="IsCurrentRecord"
        valuePropName="checked"
      >
        <Checkbox name="IsCurrentRecord" />
      </Form.Item>
    </Form>
  );
};

export default RecordsForm;

其中提供的 prop

recordComponentForm

在父组件中实例化：

const [recordComponentForm] = Form.useForm();

当我运行应用程序并强制此组件使用新的

selectedRecord

重新加载时，我希望

Form.Item

输入值从对象更改为

Title

，并且

Checkbox

反映

IsCurrentRecord

布尔值的对象。传入的对象如下所示：

标题输入值发生更改以显示对象的标题，但复选框保持不变：

我希望复选框能够根据

checked

对象上的内容来更改其

selectedRecord.IsCurrentRecord

值，就像标题一样。任何建议将不胜感激。

Answer 1

也许..只需从复选框中删除

name

即可。

<Form.Item
  label="Is Active Record"
  name="IsCurrentRecord"
  valuePropName="checked"
  >
  <Checkbox />
</Form.Item>

Checkbox 通常返回一个选择值（不是布尔值），因此您也许应该使用 Switch 组件。 但是通过使用

valuePropName="checked"

，我们可以从 Checkbox 中获取布尔值。

Answer 2

这只是

Form.Items

共享相同名称及其包含的子组件的情况。一旦我将复选框的

Form.Item

重命名为

IsCurrentRecord_FI

并这样引用它，它就开始工作了。

Answer 3

你可以使用

<Checkbox name="IsCurrentRecord" checked={Form.useWatch("IsCurrentRecord", form)} />