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

Question

我想在通知中显示此人的电子邮件 window。但是，我不知道如何将电子邮件作为参数传递给 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>
    );
  }
}

Answer 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 或使用绑定来保持 .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 - Communicate Between Components

Answer 2

使用箭头函数和babel插件"transform-class-properties"

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

  displayAlert = (item) => (event) => {
    // you can access the item object and the event object
    alert('Hi');
  }
}

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

How to pass arguments to functions in React js?

reactjs