在示例之后，我尝试创建一个自定义钩子，有关如何使用钩子在react中处理表单的文章。我还应该补充一点，我是个新手。
这是内容hooks/useInput.js：
import { useState } from "react";
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
function handleChange(event) {
console.log(event.target.name);
console.log(event.target.value);
setValue(event.target.value);
}
return [value, handleChange];
}
export default useInput;
在组件中，我具有以下内容：
import useInput from "hooks/useInput";
export default function Address(props) {
const [fullName, setFullName] = useInput("");
return (
<FormControl fullWidth>
<CustomInput
required
labelText="Full name"
id="fullName"
formControlProps={{
fullWidth: true
}}
value={fullName}
onChange={setFullName}
/>
</FormControl>
);
}
当我尝试输入一些文本时（或者即使我尝试更改默认状态），也没有任何反应。我在useInput.js中设置的任何断点都不会命中，并且控制台中不会显示任何日志记录。
我要去哪里错了？
如果要通过按钮查看当前输入值，可以看到类似的内容。我什至都没有更改您的userInput.js文件。通过执行此操作和控制台，我也可以看到更新后的值。
export default function Address(props) {
const [fullName, setFullName] = useInput("");
return (
<>
<input
placeholder="Name"
value={fullName}
onChange={setFullName}
/>
<button onClick={() => {
console.log(fullName);
}}>Submit</button>
</>
);
}
由于我不知道您的情况CustomInput，所以我用defaultinput和button。请CustomInput正确检查。因为默认input在工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句