实现一个 useInputControl hook,用于管理受控输入值并跟踪其他表单输入状态,例如:
useInputControl
true
false
该 hook 返回的 handleX 函数旨在在 <input> 的相关事件处理程序上调用,以便 hook 按预期工作。
handleX
<input>
export default function Component() { const nameInput = useInputControl('Oliver'); return ( <form> <div> <label htmlFor="name">Name</label> <input id="name" value={nameInput.value} onChange={nameInput.handleChange} onBlur={nameInput.handleBlur} /> </div> <p>Touched: {nameInput.touched.toString()}</p> <p>Dirty: {nameInput.dirty.toString()}</p> <p>Different: {nameInput.different.toString()}</p> <button type="submit" disabled={!nameInput.different}> Submit </button> <button type="button" onClick={nameInput.reset}> Reset </button> <form> );}
initialValue: string
该 hook 返回一个具有以下属性的对象:
value: string
dirty: boolean
touched: boolean
different: boolean
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void
reset: () => void
console.log()