什么是 onChange={(e) => setName(e.target.value)}？在反应中意味着

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的缩写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 之旅一切顺利