react - onclick 使用事件而不使用箭头功能答案

【问题标题】：react - onclick using event without using arrow functionreact - onclick 使用事件而不使用箭头功能
【发布时间】：2017-06-29 00:31:19
【问题描述】：

我有一个返回主页的链接，其中有一个按钮可以从数组中删除一个项目。为了防止链接重定向到主屏幕并从数组中删除项目，我需要使用ev.preventDefault()。

是否可以在不使用render 方法中的箭头函数的情况下将ev 传递给react 方法？根据我的研究，特别是 the answer here，看来以下是唯一的方法。

我担心箭头函数每次都会导致重新渲染，因为每次渲染都会创建新函数。

removeItem(label, e) {
    e.preventDefault();
    this.props.removeItem(label.id);
}


render () {
    const { label } = this.props;
    return (
      <Link to'/'>
        <span>Go Home</span>
        <span onClick={(e) => this.removeItem(label, e) }> Click me <span>
      </Link>
    );
}

【问题讨论】：

你可以去掉label参数，直接从this.props获取label。然后你可以有onClick={this.removeItem}
虽然，在每次渲染上创建一个新函数，可能并不那么昂贵:)
好地方，但我还能使用e.preventDefault吗？
是的，你会的 :) 这能回答你的问题吗？我可以给出完整的答案。

标签： javascript reactjs

【解决方案1】：

鉴于避免重新创建函数，您可以将参数提取到类道具中。这里有一些examples

例如，这将一直创建一个新函数。

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}>
            ...
          </li>
        )}
      </ul>
    );
  }
});

现在它不会在重新渲染时重新创建函数。

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map(item =>
          <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} />
        )}
      </ul>
    );
  }
});

var ListItem = React.createClass({
  render() {
    return (
      <li onClick={this._onClick}>
        ...
      </li>
    );
  },
  _onClick() {
    this.props.onItemClick(this.props.item.id);
  }
});

这里有一些 SO 解释React js onClick can't pass value to method

【讨论】：

【解决方案2】：

您可以直接删除标签参数并从 this.props 中获取标签。像这样重构你的应用：

removeItem(ev) {
    ev.preventDefault();
    this.props.removeItem(this.props.label.id);
}


render () {
    const { label } = this.props;
    return (
      <Link to'/'>
        <span>Go Home</span>
        <span onClick={this.removeItem}> Click me <span>
      </Link>
    );
}

这样，React 会自动将点击事件传递给你的removeItem 方法。

虽然应该说，在每次渲染时创建一个新函数，可能并没有那么昂贵。

【讨论】：