避免在使用钩子时创建事件处理程序

Question

让我们在 React 中假设这个组件结构：

function App() {
const [inputValue, setInputValue] = useState('')
const handleInputChange = (e) => {
const {value} = e.target
setInputValue(value)
}
return (
<div>
<SpecialInput {...{inputValue, handleInputChange}} />
</div>
)
}
function SpecialInput({inputValue, handleInputChange}) {
return (
<input 
type="text" 
value={inputValue}
onChange={handleInputChange} />
)
}

这种传统的事件处理程序模式在仅解构事件对象时会乱扔代码 IMO。

还有什么更可取的选择？

Answer 1

如前所述，以这种方式从事件目标中提取值非常普遍。

如果这是应用程序中的重复模式，则可以将操作提取到函数中。例如

function onValueChange(next) {
return (event) => {
next(event.target.value);
}
}

然后用于装饰值更改处理程序。

<SpecialInput 
handleInputChange={onValueChange(handleInputChange)}
inputValue={inputValue}
/>