Hook 函数中的句柄函数

Question

我的钩子函数

 function useFormInput(initialValue){
   const [value, setValue] = useState(initialValue);
   function handleChange(e){
   setValue(e.target.value);
                           }
    return {
          value,
          onChange: handleChange
         };
    }

我在主函数中独立调用它们的方式。

    const name = useFormInput('Aziyat');
    const rating = useFormInput('10');

据我了解，当我将它们声明为名称和评级（以上代码）时，它会自动设置值。

如果我想更改名称和评级的状态，我该怎么办？另外，如何在函数外使用 handleChange？

Answer 1

从 useFormInput() 挂钩中，您将返回一个对象 {value,onChange} 属性。您可以像这样简单地解构它们并在代码中使用它们

如果您要在同一范围内多次使用 useFormInput，您可以执行以下操作

 const {value,onChange }= useFormInput('Aziyat');

// if useFormInput has to be used multiple times in same scope, you can do this way
// Now, to access rating, you will use rating const and to change rating you can use onChangeRating function

 const {value:rating,onChange:onChangeRating} = useFormInput('10');

Hook 函数中的句柄函数

Handle Function inside Hook function

reactjs

react-hooks