點擊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,
    });
  });

這似乎成功了。 現在，當我單擊“編輯”按鈕時，輸入的標題更改為我選擇的行的標題。 我很想聽聽有關此解決方案的反饋...是否有任何其他理由這樣做？