什么是 onChange={(e) => setName(e.target.value)}？在 React 中的意思是

Question

我是 React 新手；我正在学习 React Form。我理解代码，但我并不真正理解背后的概念以及为什么我们使用这一行“ onChange={(e) => setName(e.target.value)}”。

谢谢您的帮助。

他们使用了这个例子：

import ReactDOM from 'react-dom';

function MyForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Answer 1

这里发生了两件不同的事情。

活动（e）

首先你有

e

，它是

event

的缩写。要了解它的作用，请将

onChange={(e) => setName(e.target.value)}

更改为

onChange={(e) => console.log(e)}

。检查日志，您将找到一个事件列表，其中一个事件是

target

。打开目标（如果尚未打开），在目标内，您会发现

value

。简而言之，这是您在输入中键入的目标值，也是用户键入的内容。

使用状态

您使用状态来跟踪输入中的值。所以 [name] 是 getter，[setName] 是 setter。如果您在提醒中注意到

alert(

您输入的名称是：${name}

)

。变量

name

是 getter，这意味着它保存状态的当前值。另一方面

setName

将设置该值。它之所以能够这样做，是因为您在此处设置并跟踪更改时的值

onChange={(e) => setName(e.target.value)}

。

Answer 2

表示e是正在发生的事件，这里是change，target是触发事件的元素，这里是输入，value是输入元素的值onchange顾名思义，setState用于改变你之前定义的状态你也应该阅读文档，它会清除所有内容，也许 youtube 上有一个在线解释，无论如何，对你的 React 之旅来说一切都是最好的

Answer 3

我可以想到在这一行中至少使用了 5 个概念，我建议您学习这些概念

1. 高阶函数
2. 匿名函数
3. 箭头功能
4. 状态
5. 综合事件

要开始您的旅程，只需知道此代码

onChange={(e) => setName(e.target.value)}

与以下代码相同：

function clickHandler(e) {
  setName(e.target.value)
}

<input 
  type="text" 
  value={name}
  onChange={clickHandler}
/>

也许这会让事情变得更清楚。

Answer 4

我不一定有答案，但我来这里是因为我一直在寻找这个问题的答案，并且我觉得回答的人错过了问题真正要问的内容 - 或者至少是我正在寻找的内容.

我在浏览 MDN React 指南教程时发现了与此问题类似的代码，让我好奇的是为什么使用 setUser setter 而不是仅使用局部变量？

我想我得到的答案是使用 setter setUser (setState) 以便在组件中也表示更改的值时重新渲染组件。但是，在上面的示例中，名称实际上并未使用组件，因此不需要使用 setUser （或 useState）。

查看对与局部变量完美配合的代码的调整：

import ReactDOM from 'react-dom';

function MyForm() {
  //const [name, setName] = useState("");
  var name = "";

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`The name you entered was: ${name}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
        <input 
          type="text" 
          onChange={(e) => (name = e.target.value)}
        />
      </label>
      <input type="submit" />
    </form>
  )
}

ReactDOM.render(<MyForm />, document.getElementById('root'));

Answer 5

您的实际答案在第 4 点（1、2、3 只是帮助您理解其背后的想法的信息。）

1.e 代表事件。

2. 当用户或某些 JS 代码附加到的输入发生任何更改时，将触发 onChange 函数。（有很多像 Onchange 这样的函数，您可以在 google 上浏览它们）。

3. 事件在函数中传递，这就是 JS 定义的 onChange 回调函数。

4. 每当触发更改时，您的事件都会附加一些属性...将其视为一个对象，其中包含有关触发事件的输入框的所有信息，并且在这些值中，有一个值是 e.target.value 保存触发更改那一刻的值。

5. 然后，您可以使用 setName 函数设置输入框在状态变量名称中保存的值。

如果你明白就点赞吧。