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

时间:2017-02-10 15:33:49

标签: javascript reactjs

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

是否可以在ev方法中不使用箭头函数将render传递给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>
    );
}

2 个答案:

答案 0 :(得分:2)

您可以直接删除label参数并从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方法。

虽然应该说,在每个渲染上创建一个新函数,可能并不是那么昂贵。

答案 1 :(得分:0)

为了避免重新创建该功能,您可以将参数提取到类道具中。以下是一些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