Javascript react-onclick使用事件而不使用箭头函数

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

是否可以在渲染方法中不使用箭头函数而将ev传递给react方法？从我的研究和具体情况来看，以下是实现这一目标的唯一途径

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

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>
    );
}

---

为了避免重新创建函数，可以将参数提取到类props中。这里有一些

例如，这将始终创建一个新函数

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);
  }
});

---

这里有一些这样的解释

为了避免重新创建可以将参数提取到类props中的函数。这里有一些

例如，这将始终创建一个新函数

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);
  }
});

---

这里有一些解释

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

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将自动将click事件传递给removeItem方法

---

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

您可以删除label参数，直接从this.props获取label。像这样重构你的应用程序：

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将自动将click事件传递给removeItem方法

---

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

您可以删除label参数，直接从这个.props中获取label。然后您可以只使用onClick={this.removietem}虽然在每个渲染上创建一个新函数可能并不那么昂贵：很好，但是我仍然可以使用e.preventDefault吗？是的，您会：这回答了您的问题吗？我可以给出一个完整的答案。您可以删除label参数并直接从this.props获取label。然后您可以只使用onClick={this.removietem}虽然在每个渲染上创建一个新函数可能并不那么昂贵：很好，但是我仍然可以使用e.preventDefault吗？是的，您会：这回答了您的问题吗？我可以从中得出一个完整的答案。