react modal弹窗输入框

React Modal 是一个常用的弹窗组件库，可以用来实现弹窗输入框的功能。下面是一个简单的实现示例：

首先，你需要引入 React Modal：

import Modal from 'react-modal';

然后，在你的组件中，你需要定义一个状态来控制弹窗的显示与隐藏：

function MyComponent() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };
  
  return (
    <div>
      <button onClick={openModal}>打开弹窗</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
      >
        <h2>请输入：</h2>
        <input type="text" />
        <button onClick={closeModal}>确定</button>
      </Modal>
    </div>
  );
}

在这个示例中，我们定义了一个状态 `modalIsOpen`，表示弹窗是否打开。当用户点击打开弹窗的按钮时，我们调用 `openModal` 函数来更新状态，打开弹窗。当用户点击弹窗中的确定按钮或者关闭弹窗时，我们调用 `closeModal` 函数来更新状态，关闭弹窗。

在弹窗中，我们可以通过普通的 HTML 元素来实现输入框和按钮。在这个示例中，我们定义了一个输入框和一个确定按钮，用户可以在输入框中输入内容，并点击确定按钮来关闭弹窗。

需要注意的是，在 React Modal 中，我们需要通过 `isOpen` 属性来控制弹窗的显示与隐藏。当 `isOpen` 的值为 `true` 时，弹窗会显示出来；当 `isOpen` 的值为 `false` 时，弹窗会隐藏起来。同时，我们还需要定义一个 `onRequestClose` 回调函数，来处理用户点击弹窗以外的区域时，弹窗自动关闭的情况。

希望这个示例对你有所帮助！