React Antd对话框Input数据回显：告别令人头痛的刷新难题

2023-04-02 17:31:27

数据回显：困扰下的终极解决方案

在使用 React Antd 对话框时，数据回显问题是一个恼人的困扰。当我们在不同的对话框中输入数据时，数据却未能随之更新，而是固执地显示上一个对话框中的数据。这不仅让人困惑，还会导致数据混乱，破坏用户体验。

浅析罪魁祸首：initialValues 和 setName 的局限

最初，我们尝试通过 initialValues 属性设置对话框的初始值，并使用 setName 方法更新 input 的值。然而，这种方法存在一个致命的缺陷：setName 方法不会触发重新渲染。当我们点击不同的对话框时，input 的值仍然停留在上一个对话框中的状态。

一劳永逸的解决方案：setState 拯救数据回显

为了彻底解决数据回显问题，我们需要诉诸 setState 方法。setState 强制组件重新渲染，从而更新 input 的值。具体步骤如下：

定义状态变量： 在组件的状态中，定义一个变量存储 input 的值。
设置初始值： 在对话框打开时，使用 initialValues 属性设置状态变量的初始值。
更新值和触发重新渲染： 当 input 值发生变化时，使用 setName 方法更新状态变量的值，并调用 setState 方法触发重新渲染。

代码示例：亲手实践

以下代码实例演示了如何使用 setState 方法实现 input 数据回显：

import React, { useState } from "react";
import { Modal, Input } from "antd";

const App = () => {
  const [visible, setVisible] = useState(false);
  const [name, setName] = useState("");

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

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

  const handleOk = () => {
    // 业务逻辑
    setVisible(false);
  };

  const handleChange = (e) => {
    setName(e.target.value);
    setState({ name: e.target.value });
  };

  return (
    <>
      <button onClick={showModal}>打开对话框</button>
      <Modal
        title="对话框"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Input value={name} onChange={handleChange} />
      </Modal>
    </>
  );
};

export default App;