javascript - 你如何在 React 中使用 onChange？

Question

这些处理输入更改的方法之间有什么区别，我什么时候应该使用其中一种？：

const handleChange = () => {
  console.log("hello")
}

// first method
<input
  onChange={() => handleChange()}
  [...]

// second method
<input
  onChange={() => handleChange}
  [...]

// third method
<input
  onChange={handleChange}
  [...]

// fourth method
<input
  onChange={handleChange()}
  [...]

请注意，我使用的是功能组件。

标签： javascripthtmlreactjs

Answer 1

第一种方法 <input onChange={() => handleChange()} [...]

第二种方法 <input onChange={() => handleChange} [...]

第四种方法 <input onChange={handleChange()} [...]

根据 ECMA 6，这些都不能在任何地方使用。

如果我们只有一个 onChange 事件，这是您的第三个选项，那么我们只需将事件作为名称传递，无需将事件对象作为参数传递给参数。

// third method 
<input onChange={handleChange} [...]

但是，如果我们需要将我们的事件作为参数传递，那么请按照以下方式选择此选项[我们有多个事件 onClick 或 onchange]：

e.g. <input onChange={(event) => handleChange(event); otherEvent(); }}

然后我们可以使用此方法访问我们的句柄更改值

const handleChange = (event) => {
  console.log("hello", event)
}