发展

反应：处理“This”和事件处理程序

通过在…上2019年10月24日,|~5分钟阅读

React是一个用于构建用户界面(ui)的JavaScript库。构建ui的一个重要方面是，您必须能够对用户交互做出反应(获得它?)。React有自己处理事件的方法，但它取决于开发人员来处理的值这如果我们需要访问句柄事件函数中的状态属性，则在句柄事件函数中使用关键字。
价值这对于刚接触JavaScript的开发人员来说，这是一个常见的问题，特别是对于那些具有更传统的绑定方式的语言经验的开发人员来说这．最重要的是要记住这根据调用函数的方式或位置而变化。在处理事件处理程序时，函数的调用者最终是句柄函数所附加的JSX元素，因此是的值这. 然而，大多数时候（如果不是所有时候），我们想要这作为React组件类/函数，而不是JSX元素。
让我们来看一些处理这个问题的不同方法。
首先让我们来看一个不好的例子。我们在SearchBar组件上有一个受控的输入，我们想要向上传播它的值。我们在组件的props上接收到onSubmit函数，需要在表单提交时调用它。

类SearchBar扩展React。Component {state = {term: "};onFormSubmit (e) {e.preventDefault ();this.props.onSubmit (this.state.term);};> 
 
   this.setState({ term: e.target.value })} />
); } }

这将失败，因为这. props和这onFormSubmit中的.state将是未定义的，因为这将是表单元素，而不是搜索栏组件。
解决这个问题的一个简单方法是使用ES5 bind函数，它允许我们绑定一个函数的这值转换为提供的值。

这在本例中可能行得通，但如果需要在多个元素或组件上使用相同的事件处理程序，会发生什么呢?

  . MyInput onChange={this. handlechange .bind(this)} /> . MyInput

看起来不太好。然而，多亏了ES6类表示法，我们可以使用构造函数来绑定方法。前面的例子看起来像这样:

类SearchBar扩展React。Component {constructor(props) {super(props);这一点。State = {term: "};这一点。在…上FormSubmit = this.onFormSubmit.bind(this); } onFormSubmit(e) { e.preventDefault(); this.props.onSubmit(this.state.term); } render() { return ( 
  
   this.setState({ term: e.target.value })} /> 
  
 ); } }

它的工作原理完全相同，但我们只在构造函数上执行一次绑定。通过这样做，我们可以在JSX的几个属性上重用相同的事件处理程序。
但是还有一个更好更简洁的方法，那就是使用ES2015箭头函数。

类SearchBar扩展React。Component {state = {term: "};onFormSubmit = e => {e. preventdefault ();this.props.onSubmit (this.state.term);};> 
 
   this.setState({ term: e.target.value })} />
); } }

arrow函数自动绑定这值到外围的词法上下文，函数就是在这里定义的(在本例中是SearchBar类)。使用这个方法，我们根本不需要构造函数。
如果您细心观察，您可能会注意到，在前面的示例中，输入元素的onChange处理程序一直在使用一个箭头函数!这通常被认为是一个不好的实践，因为React需要在每次触发render方法时创建该函数的新实例。
因此，该示例的最终版本为：

类SearchBar扩展React。Component {state = {term: "};onFormSubmit = e => {e. preventdefault ();this.props.onSubmit (this.state.term);};onInputChange = e =>setState({term: e.tar .value});>
); } }

这看起来更干净，我们通过不在JSX属性上声明函数来避免不必要的性能问题。
这两种方法，即使用绑定或箭头函数，都是处理这关键字值。在我看来，箭头函数看起来更干净，也更容易编写。但是，为了使用它们，您需要将Babel正确配置为使用建议的类属性特性，因为还没有在所有浏览器中完全支持它。
我希望这对处理价值有帮助这React的事件处理程序函数中的关键字。如果您对未来的主题有任何建议，或者您想使用React分享您的经验，请在下面留下评论。

标签

关于作者

Marcos是一个对UX/UI和前端开发充满热情的全栈软件工程师。自2016年以来，他一直在Perficient Digital工作。

更多作者介绍

留话

该网站使用Akismet来减少垃圾邮件。了解如何处理您的评论数据．

订阅每周博客文摘:

注册
类别