如何将参数传递给React js中的函数？

小编典典

如何将参数传递给React js中的函数？

reactjs

我想在警报窗口中显示该人的电子邮件。但是，我不知道如何将电子邮件作为参数传递给displayAlert方法。此外，它也不会让我使用。因此，我必须将displayAlert方法分配给变量，并在onClick中使用它。我不知道为什么它不能让我直接调用它。

        class People extends React.Component{
    render (){
            var handleClick = this.displayAlert;
            var items = this.props.items.map(function(item) {
                return(
                    <ul key = {item.id}>
                        <li>
                            <button onClick= {handleClick}>{item.lastName + ', ' + item.firstName}</button>
                        </li>
                    </ul>
                )
            });
            return (<div>{items}</div>);
     }

    displayAlert (){
        alert('Hi');
    }
    }

     class PersonList extends React.Component{
         render () {
            return (
        <div>
            <People items={this.props.people}/> /* People is an array of people*/
        </div>
        );
      }
    }

阅读 245

2020-07-22

共1个答案

小编典典

ES6方式 ：

使用箭头功能 =>

    const items = this.props.items.map((item) => (
      <ul key={item.id}>
        <li>
          <button onClick={() => this.displayAlert(item.email)}>
            {item.lastName + ', ' + item.firstName}
          </button>
        </li>
      </ul>
    ));

onClick 匿名函数被调用并执行 this.displayAlert(item.email)

ES5方式：

您可以使用.bind并在其中传递参数来执行此操作。

您还应该传递this或使用bind来使.map函数保持适当的上下文：

var items = this.props.items.map(function(item) {
  return (
    <ul key={item.id}>
      <li>
        <button onClick={this.displayAlert.bind(this, item.email)}>
          {item.lastName + ', ' + item.firstName}
        </button>
      </li>
    </ul>
  );
}, this);

在此处的示例中显示：React-在组件之间通信

2020-07-22