React Hooks+Antd 表格行数据传递到编辑表单的实现问题

实现方案（基于Ant Design生态） #

你只需要按以下两步修改现有代码即可实现行数据传递到编辑表单的需求：

1. 修改父组件 GestionUsuarios

首先新增状态存储当前选中的编辑行数据，同时给编辑按钮、编辑表单补充对应传参逻辑：

const GestionUsuarios = () => {
  // 原有状态保留，新增下面这行存储当前编辑行
  const [currentEditRow, setCurrentEditRow] = useState(null);

  const columns = [
    // 其他列配置保留，修改Action列的编辑按钮点击逻辑
    {
      title: 'Action',
      key: 'action',
      fixed: 'right',
      width: 100,
      render: (_, record) => (
        <div>
          <Button
            onClick={() => {
              // 点击时把当前行record存到状态，同时打开弹窗
              setCurrentEditRow(record);
              setVisibleEdit(true);
            }}
            icon={<EditOutlined />}
          />
        </div>
      ),
    },
  ];

  // 原有onEdit方法调整
  const onEdit = (response, id) => {
    console.log('USUARIO A editar: ', response);
    setVisibleEdit(false);
    axios
      .put(`http://localhost:8080/api/usuarios/${id}`, {
        tipo: response.tipo,
        nombre: response.nombre,
        pass: response.pass,
        username: response.username,
        apellido: response.apellido,
        email: response.email,
      })
      .then((response) => {
        setPost(response.data);
        window.location.reload();
        // 提交完成清空当前编辑行
        setCurrentEditRow(null);
      });
  };

  return (
    <div>
      {/* 其他内容保留，修改EditForm的传参 */}
      <EditForm
        visible={visibleEdit}
        editRow={currentEditRow}
        onSubmit={onEdit}
        onCancel={() => {
          setVisibleEdit(false);
          // 关闭弹窗清空编辑行
          setCurrentEditRow(null);
        }}
      />
    </div>
  )
}

2. 修改子组件 EditFormUsuarios

利用Ant Design Form的setFieldsValue方法，监听传入的编辑行数据自动填充表单，不需要自己维护表单字段状态：

// 接收新增的editRow和onSubmit参数
const EditFormUsuarios = ({ visible, onSubmit, onCancel, editRow }) => {
  const [form] = Form.useForm();

  // 监听编辑行和弹窗显隐状态，自动给表单赋值
  useEffect(() => {
    if (editRow && visible) {
      form.setFieldsValue(editRow);
    }
    // 关闭弹窗时清空表单
    if (!visible) {
      form.resetFields();
    }
  }, [editRow, visible, form]);

  return (
    <Modal
      visible={visible}
      title='Editar usuario'
      okText='Confirmar'
      cancelText='Cancelar'
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            // 提交表单时把值和编辑行ID传给父组件
            onSubmit(values, editRow.id);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout='vertical'
        name='form_in_modal'
      >
        {/* Form.Item不需要手动加value、onChange属性，Form会自动受控管理，其他字段同理 */}
        <Form.Item
          name='id'
          label='ID'
          rules={[
            {
              required: true,
              message: 'Introduce el ID',
            },
          ]}
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
          name='username'
          label='Alias'
          rules={[
            {
              required: true,
              message: 'Introduce el alias',
            },
          ]}
        >
          <Input />
        </Form.Item>
        {/* 剩余其他表单项配置和原来保持一致即可，删掉手动加的value、onChange属性 */}
      </Form>
    </Modal>
  );
};

export default EditFormUsuarios;

内容的提问来源于stack exchange，提问作者david Izquierdo