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

Posted 2023-02-21

【中文标题】如何将参数传递给 React js 中的函数？

【英文标题】：How to pass arguments to functions in React js?

【发布时间】：2015-08-16 23:16:18

【问题描述】：

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

【参考方案1】：

使用箭头函数和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');
  

【讨论】：

如果我想添加以传递另一个对象让我们说一个字符串以及项目怎么办？

【参考方案2】：

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 - Communicate Between Components

【讨论】：

请不要在组件props中创建函数。见：***.com/a/36677798/434697

使用箭头函数每次都在创建一个新函数，这会产生性能影响