通过 API 式组件在 React 中实现 Element-Plus Prompt 效果

2024-02-05 14:19:54

利用API式组件和Antd Modal在React中实现类似Element-Plus的提示功能

在现代Web开发中，我们经常需要处理修改单个字段的常见场景。Element-Plus提供了功能强大的提示功能，可以轻松满足此需求。然而，React开发人员可能需要寻找一个类似的解决方案。本文将指导您利用Antd Modal组件和API式组件模式在React中实现类似Element-Plus提示功能。

API式组件

API式组件是一种设计模式，它将组件的API和内部实现分离开来。这种方法增强了组件的灵活性、可重用性和代码可读性。通过将提示功能封装在API式组件中，我们可以创建可插拔且易于与其他React组件集成的模块化解决方案。

使用Antd Modal实现提示

第一步，在您的项目中安装Antd库：

npm install antd

接下来，在组件中导入必要的Antd模块：

import {Modal} from 'antd';

现在，我们可以创建一个API式组件来封装提示功能：

const Prompt = ({visible, title, onOk, onCancel}) => {
  const [value, setValue] = useState('');

  const handleOk = () => {
    onOk(value);
  };

  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modal
      visible={visible}
      title={title}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Input value={value} onChange={(e) => setValue(e.target.value)} />
    </Modal>
  );
};

此组件通过useState管理输入字段的值，并提供处理确定和取消按钮点击事件的handleOk和handleCancel回调函数。

使用方法

要使用Prompt组件，您需要在需要提示功能的React组件中使用它。以下是一个示例：

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

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

  const handleOk = (value) => {
    console.log('确定：', value);
    setVisible(false);
  };

  const handleCancel = () => {
    console.log('取消');
    setVisible(false);
  };

  return (
    <div>
      <Button onClick={showPrompt}>修改</Button>
      <Prompt
        visible={visible}
        title="请输入修改内容"
        onOk={handleOk}
        onCancel={handleCancel}
      />
    </div>
  );
};