reactjs - 什么是 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(The name you entered was: ${name})。变量 name 是 getter，这意味着它保存状态的当前值。另一方面，setName 将设置该值。它之所以能够这样做，是因为您在此处设置和跟踪更改时的值 onChange={(e) => setName(e.target.value)}。