Handle Function在Hook函数内部

Question

我的钩子函数

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

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

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

据我所知，当我将它们声明为名称和评级时(上面的代码)，它会自动setValue。

如果我想改变名字和评级的状态，我该怎么做?此外，我如何在函数之外使用handleChange ?

Answer 1

从useformminput()钩子，你返回一个对象{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');