reactjs - Hook 函数中的句柄函数

Question

我的钩子(Hook)函数

 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() Hook 中，您将返回一个对象 {value,onChange} 属性。你可以像这样简单地解构它们

 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');