javascript - React 中的 event.target.value 到底是什么？

Question

这个问题在这里已经有了答案:





e.target.value on an input field ReactJs, how does it work?

(2 个回答)



event.target.value question with React.js

(2 个回答)


去年关闭。




我能够在我的简单 React 应用程序中实现一个事件处理程序，我想更深入地了解 event.target.value。我有一个猜测，但我想问其他人，以便我可以确认或修改任何错误的理解。
那么......我们如何才能在 React 中使用 event.target.value 呢？事件是否属于 Event Web API that I found here ？或者它更像是一个 React 的东西？
这是我的代码供引用

import React from 'react';
import Display from './Display';

export default class Search extends React.Component{
  constructor(props){
    super(props);
    this.state = { userInput: '' };
    this.onSubmit = this.onSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  updateInput(e){
    this.setState({userInput: e.target.value});
  }

  onSubmit(){
    const title = this.state.userInput;
    console.log(title)
  }
  
  render(){
    return(
      <div>
      <label>
        Movie Search App
        <br></br>
        <input type="text" value={this.state.userInput} onChange={this.updateInput}/>
      </label>
      <br></br>
        <input type="submit" value="Search" onClick={this.onSubmit}/>
        <Display />
    </div>
    )
  }
}

Answer 1

event.target 给你元素那触发了事件。
所以，event.target.value检索 值(value) 该元素(在您的示例中为输入字段)。
在 React 中，event是 SynthenticEvent ，围绕浏览器的 native 事件的包装器。它与浏览器的原生事件具有相同的接口(interface)，包括stopPropagation()和 preventDefault() ，但事件在所有浏览器中的工作方式相同。

事件是否属于我找到的事件 Web API here ?
没有 , 是 SynthenticEvent 这是原生 event 的包装器.
它更像是一个 React 的东西吗？
是 , 和浏览器原生的event 界面一样但差别不大attributes .
如何在 React 代码中访问浏览器的原生事件？
在大多数情况下，您不需要这样做。但是你可以使用 nativeEvent SynthenticEvent 的属性(property)即event.nativeEvent .