如何在 React 子组件中设置事件处理程序

简介使用 React 子组件是一种在组件中使用多个组件的做法，可将复杂的层次结构分解为小型、独立且可重复使用的组件。这些子组件可以配置为通过 props 处理事件和数据。“Props”代表属性，是 React 的一项功能，可在组件之间以不可变的键值对对象的形式传递数据。

实现子组件相当简单，但有时使用匿名函数或 React 类来保留上下文可能比较棘手。本指南介绍了在 React 中使用匿名和 ES6 功能实现子组件。

在 React 组件中实现事件

可以通过扩展Component类来创建 React 类组件，并使用函数实现onClick事件来处理点击：

      import React, { Component } from 'react';

export default class App extends Component {

  handleClick() {
    console.log("click");
  }

  render() {
    return (
      <div className="container">
        <button onClick={this.handleClick} > click </button>
      </div>
    );
  }
}
    

在上面的代码片段中，只要单击按钮，就会触发handleClick函数。无需将handleClick与this绑定，因为handleClick不会从其容器 ( App ) 组件访问任何内容。否则，就会出现错误，因为this在运行时指向的是window对象，而不是App。

将事件处理程序传递给子组件

子组件可以作为类或函数组件实现。可以使用函数组件优化实现。Address 子组件将通过props从容器组件接收详细信息：

      function Address({ type, houseNo, clickHandler }) {
  const isPermanent = type && type === 'Temporary';

  return (
    <div>
      <b>{type}</b>
      <p>{houseNo}
        {' '}
        {isPermanent ? <button onClick={clickHandler} title='Delete'>X</button> : ''}
      </p>
    </div>
  )
}
    

Address组件使用解构赋值{ type, houseNo, clickHandler }来直接访问传递的prop值。clickHandler是一个处理点击的函数，它被传递给onClick属性。

App组件使用state来存储地址的数据，removeTempAddress函数将仅使用永久对象重置地址对象的值：

      export default class App extends Component {

  // set the values for the addresses in state object
  state = {
    addresses: {
      permanent: {
        houseNo: 'ABC',
      },
      temporary: {
        houseNo: 'XYZ',
      }
    }
  }

  // an arrow function to retails the context of this
  removeTempAddress = () => {
    const { permanent } = this.state.addresses;
    // reset value of 'addresses' to 'permanent' only
    this.setState({ addresses: { permanent } })
  }

  render() {
    const { permanent, temporary } = this.state.addresses;
    return (
      <div className="container">
        <Address type='Permanent' houseNo={permanent.houseNo} />
        {temporary && <Address type='Temporary' houseNo={temporary.houseNo} clickHandler={this.removeTempAddress} />}
      </div>
    );
  }
}
    

通过 props 传递事件处理程序可将控制权交给容器组件来处理事件，并有助于创建可重用的组件。

在运行时实现子组件

在运行时生成子组件是动态 UI 的常见要求。通常，UI 必须根据数据项列表中的变化进行渲染/更新，例如，显示购物车中的商品、库存的表格数据等。由于数据的大小是动态的，解决方案是在生成项目时迭代数据。使用数组映射是一种迭代数据值进行处理的常用方法。它需要一个匿名函数来处理数组的元素，并且可以使用箭头函数在匿名函数内访问上下文（App组件）：

      export default class App extends Component {
  state = {
    items: ["Banana", "Mango"],
  };

  handleClick(event) {
    console.log(event.target.innerHTML);
  }

  render() {

    var listItems = this.state.items.map((item, index) => {
      return <li key={index} onClick={this.handleClick}><a href='/#'>{item}</a></li>;
    });
 
    return (
      <div className="container">
        <ul>{listItems}</ul>
      </div>
    );
  }
}
    

使用箭头函数可以通过保留上下文来访问this.handleClick 。或者， map函数也将this作为参数来保留上下文：

      var listItems = this.state.items.map(function (item, index) {
  return <li key={index} onClick={this.handleClick}><a href='/#'>{item}</a></li>;
}, this); // this as second argument to map function
    

这也可以使用bind来完成：

      var listItems = this.state.items.map(function (item, index) {
  return <li key={index} onClick={this.handleClick}><a href='/#'>{item}</a></li>;
}.bind(this)); // binding this with anonymous function
    

结论

子组件是创建可重用元素以及通过 props 传递事件和数据的绝佳方式。在运行时，默认情况下this指的是窗口对象，并且有很多方法可以通过箭头函数、传递this 的重载方法和bind方法在动态子组件中保留上下文。希望本指南解释了以不同方式创建子组件的必要细节。祝您编码愉快！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文