-1

我是 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'));
4

3 回答 3

1

表示e是正在发生的事件，这里是change，target是触发事件的元素，这里是input，value是input元素的值Onchange顾名思义，setState用来改变声明你之前定义的，你应该阅读文档，它会清除一些东西，也许是 youtube 上的在线解释，无论如何，这对你的 React 之旅来说都是最好的

于 2022-02-08T18:41:11.413 回答
1

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

事件(e)

首先你有ewhich 是event. 要了解它确实更改onChange={(e) => setName(e.target.value)}为onChange={(e) => console.log(e)}. 检查日志，您会发现其中一个是target. 打开目标（如果尚未打开）并在目标内，您会发现value. 简而言之，这是在您的输入中输入的目标值，也就是用户输入的内容。

使用状态

您使用状态来跟踪输入中的值。所以 [name] 是 getter，而 [setName] 是 setter。如果您在警报中注意到alert(您输入的名称是： ${name} )。变量name是 getter，这意味着它保存状态的当前值。另一方面setName将设置该值。之所以能够这样做，是因为您在此处设置和跟踪 change 的值onChange={(e) => setName(e.target.value)}。

于 2022-02-08T18:54:23.570 回答
0

我能想到的至少有 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}
/>

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

于 2022-02-08T21:49:27.270 回答