点击antd Table Row编辑按钮，在不同组件上的antd Input中显示行值

Question

我有一个模态组件，它同时显示表单组件和表格组件。 这个想法是我想单击表中一行的“编辑”按钮并将行记录传递给表单组件，以便显示并可能对其进行编辑。 我的模态容器组件设置如下：

import React, { useState } from "react";
import { Modal, Button, Form } from "antd";
import RecordsTable from "./RecordsTable";
import RecordsForm from "./RecordsForm";

const ModalButton = () => {
  const [selectedRecord, setSelectedRecord] = useState();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [recordComponentForm] = Form.useForm();

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={"1100px"}
        bodyStyle={{ height: 460 }}
      >
        <RecordsForm
          selectedRecord={selectedRecord}
          recordComponentForm={recordComponentForm}
        />
        <RecordsTable setSelectedRecord={setSelectedRecord} />
      </Modal>
    </>
  );
};

export default ModalButton;

表单组件如下所示：

import React from "react";
import { Input, Checkbox, Button, Form } from "antd";
import moment from "moment";
import { SaveOutlined } from "@ant-design/icons";

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  console.log(selectedRecord);
  const title = selectedRecord ? selectedRecord.Title : null;

  return (
    <Form
      name="seasonForm"
      initialValues={{
        Title: title,
      }}
      autoComplete="off"
      layout={"inline"}
      form={recordComponentForm}
    >
      <Form.Item
        label="Title"
        name="Title"
        rules={[{ required: true, message: "Add a Title" }]}
      >
        <Input
          name="Title"
          placeholder="Record Title"
          value={selectedRecord ? selectedRecord.Title : null}
        />
      </Form.Item>
    </Form>
  );
};

export default RecordsForm;

最后是这样的表格组件：

import { Table, Tag, Space } from "antd";
import { EditOutlined } from "@ant-design/icons";

const RecordsTable = ({ setSelectedRecord }) => {
  const columns = [
    {
      title: "ID",
      dataIndex: "ID",
      key: "ID",
      width: 150,
    },
    {
      title: "Title",
      dataIndex: "Title",
      key: "Title",
      width: 250,
    },
    {
      title: "Description",
      dataIndex: "Description",
      key: "Description",
      width: 450,
    },
    {
      title: "",
      key: "Actions",
      align: "center",
      render: (record) => {
        return (
          <>
            <EditOutlined
              onClick={() => {
                setSelectedRecord(record);
              }}
            />
          </>
        );
      },
    },
  ];

  const data = [
    {
      key: "1",
      ID: "1001",
      Title: "Test Title 1",
      Description: "Testing Description 1",
    },
    {
      key: "2",
      ID: "1002",
      Title: "Test Title 2",
      Description: "Testing Description 2",
    },
    {
      key: "3",
      ID: "1003",
      Title: "Test Title 3",
      Description: "Testing Description 3",
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={{ pageSize: 5 }}
    />
  );
};

export default RecordsTable;

当我尝试单击行编辑按钮时，我可以在 forms console.log(selectedRecord)中看到 selectedRecord 以正确的值到达那里：

但是，我无法让该值出现在表单的所需输入中。 我希望有人能够确定我哪里出错并提供建议。

Answer 1

我终于设法弄清楚了这一点！ 我需要使用Form.setFieldsValue调用。 在我的情况下，在 useEffect ...

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  console.log(selectedRecord);
  const title = selectedRecord ? selectedRecord.Title : null;

  useEffect(() => {
    recordComponentForm.setFieldsValue({
      Title: selectedRecord ? selectedRecord.Title : null,
    });
  });

这似乎成功了。 现在，当我单击“编辑”按钮时，输入的标题更改为我选择的行的标题。 我很想听听有关此解决方案的反馈...是否有任何其他理由这样做？