react hooks的封装

在React中，可以使用自定义的Hooks来封装复用的逻辑。以下是一个简单的例子，展示了如何封装一个用于处理表单输入值的Hook：

import { useState } from 'react';
 
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
 
  const handleChange = (e) => {
    setValue(e.target.value);
  };
 
  return { value, onChange: handleChange };
}
 
export default useFormInput;

使用这个封装的Hook：

import useFormInput from './useFormInput';
 
function App() {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');
 
  return (
    <div>
      <input {...nameInput} type="text" placeholder="Name" />
      <input {...emailInput} type="email" placeholder="Email" />
    </div>
  );
}
 
export default App;

在这个例子中，useFormInput Hook封装了表单输入值的获取和更新逻辑。它返回一个对象，包含当前输入的value和更新这个值的onChange处理函数，使得在多个表单输入中复用变得简单。