ReactHooks实现弹框输入框通用组件

React Hooks：封装弹框输入框组件

简介

React Hooks 是一种强大的工具，允许我们在函数组件中利用状态管理和其它 React 特性。它们简化了代码，提高了可维护性。本文将指导您使用 React Hooks 封装一个弹框输入框组件。

组件步骤

1. 创建函数组件

首先，创建一个名为 ModalInput 的函数组件。

2. 使用 useState

使用 useState 钩子管理组件状态，包括 isOpen（表示模态框是否打开）和 value（输入框值）。

const [isOpen, setIsOpen] = useState(false);
const [value, setValue] = useState('');

3. 使用 useEffect

使用 useEffect 钩子在组件挂载或状态更新时执行特定操作。例如，打开或关闭模态框：

useEffect(() => {
  if (isOpen) {
    document.body.classList.add('modal-open');
  } else {
    document.body.classList.remove('modal-open');
  }
}, [isOpen]);

4. 使用 useRef

使用 useRef 钩子获取输入框元素的引用，以便对其进行聚焦或获取其值：

const inputRef = useRef(null);

5. 渲染组件

在组件的 render 方法中，渲染模态框和输入框：

return (
  <>
    {isOpen && (
      <div className="modal">
        <div className="modal-content">
          <input ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} />
          <button onClick={() => onSubmit(value)}>提交</button>
          <button onClick={() => onClose()}>关闭</button>
        </div>
      </div>
    )}
  </>
);

使用说明

导入 ModalInput 组件并按如下方式使用它：

import ModalInput from './ModalInput';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const onSubmit = (value) => {
    // 处理输入框值
  };

  const onClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开模态框</button>

      <ModalInput
        isOpen={isOpen}
        onClose={onClose}
        onSubmit={onSubmit}
      />
    </div>
  );
};

扩展技巧

• 添加标题和消息到模态框
• 更改输入框类型
• 添加清除按钮
• 添加验证函数

总结

封装的弹框输入框组件是一个方便的工具，可简化用户输入收集过程。它利用 React Hooks 来管理状态、执行操作并获取元素引用。

常见问题解答

1. 如何使用 useRef 钩子？

   • useRef 返回一个对象，它有一个指向 DOM 元素的 current 属性。要获取元素引用，请使用 ref={inputRef}。

2. 如何重置输入框值？

   • 在 onClose 函数中设置 value 状态为空字符串：setValue('')。

3. 如何聚焦输入框？

   • 使用 inputRef.current.focus() 在组件挂载后聚焦输入框。

4. 如何添加一个标题到模态框？

   • 在模态框内容中添加一个 <h3> 元素并设置 children 属性。

5. 如何验证输入框值？

   • 在 onSubmit 函数中使用正则表达式或第三方验证库验证输入框值。