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}
/>

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

1 个答案: