使用 useState 开发 modal 弹窗

在React中，modal弹窗是常用的组件，比如用于提示消息、展示更多详情或者编辑模态框等。为了方便开发，我们可以使用useState来实现弹窗的状态管理。

使用 useState 存储弹窗状态

我们需要使用useState来声明弹窗状态变量，通常情况下，弹窗应该有如下状态：

• 是否显示弹窗：visible
• 弹窗的标题：title
• 弹窗的内容：content

import React, { useState } from 'react';
import Modal from 'antd/lib/modal'; // 引入高级UI库Antd中的Modal组件

const MyModal = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

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

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

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

  return (
    <>
      <button onClick={showModal}>弹出Modal</button>
      <Modal
        title={title}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>{content}</p>
      </Modal>
    </>
  );
};

在上面的例子中，我们声明了三个状态变量 visible、title和content。我们使用 showModal 函数来显示弹窗，handleOk和handleCancel函数分别用于确认和取消弹窗。

在Modal组件中，我们设置 title 为 title 状态变量，设置 visible 为 visible 状态变量，设置 onOk 和 onCancel 为对应的函数。弹窗的内容则使用 content 状态变量。

使用 useState 修改弹窗状态

我们可以使用useState提供的修改状态变量的方法来更新弹窗状态。例如，我们可以在弹窗显示时改变标题和内容。

const MyModal = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const showModal = () => {
    setVisible(true);
    setTitle('Modal标题');
    setContent('Modal内容');
  };

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

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

  return (
    <>
      <button onClick={showModal}>弹出Modal</button>
      <Modal
        title={title}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>{content}</p>
      </Modal>
    </>
  );
};

在上面的例子中，我们使用 setTitle 函数来修改标题，使用 setContent 函数来修改内容。

总结

使用useState声明的状态变量可以让我们方便地管理modal弹窗中的状态数据。同时，我们也可以使用它提供的修改状态变量方法来实现弹窗的交互逻辑。

以上就是使用useState开发modal弹窗的简单介绍，希望能对你有所帮助。