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

Question

我能够在我的简单 React 应用程序中实现一个事件处理程序，并且我想更深入地了解 event.target.value。我有一个猜测，但我想询问其他人，以便我可以确认或修改任何错误的理解。

那么...我们如何才能在 React 中使用 event.target.value 呢？事件是否属于我在此处找到的 Event Web API？或者它更像是一个 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为您提供触发事件的元素。

\n

因此，event.target.value检索该元素的值（在您的示例中为输入字段）。

\n

在 React 中，events 是SynthenticEvent，它是 browser\xe2\x80\x99s 本机事件的包装器。它与 browser\xe2\x80\x99s 本机事件具有相同的界面，包括stopPropagation()和preventDefault()，但事件在所有浏览器中的工作方式相同。

\n\n

事件是否属于我在此处找到的 Event Web API ？

\n

不，它是SynthenticEvent原生的包装event。

\n

它更像是 React 的东西吗？

\n

是的，它具有与浏览器本机相同的界面，但属性event略有不同。

\n

如何在 React 代码中访问浏览器的本机事件？

\n

大多数情况下，您不需要这样做。但您可以使用ienativeEvent的属性。SynthenticEventevent.nativeEvent

\n\n