在 React 的 onClick 函数中传递事件对象答案

【问题标题】：Passing event object in onClick function in React在 React 的 onClick 函数中传递事件对象
【发布时间】：2016-12-21 01:52:48
【问题描述】：

我有一个 React 应用程序，在其中单击列标题时，表格会对数据进行排序（通过合并排序）。

我想传递数据（即对象数组）和事件对象。我想使用事件对象来获取点击列的值，然后使用它对数据进行排序。

但是，我不断收到事件对象未定义的错误消息。

以下是代码的相关部分：

  sortColumn (siteArr, evt) {
    if (siteArr.length < 2) {
      return siteArr;
    } else {
      const column = evt.target.value; // evt returns undefined
      const midPoint = Math.round(siteArr.length / 2);
      const subLeft = this.sortColumn(siteArr.slice(0, midPoint));
      const subRight = this.sortColumn(siteArr.slice(midPoint));
      return this.merge(column, subLeft, subRight); 
    }
  }
  merge (column, left, right) {
    const out = [];
    while (left.length && right.length) {
      out.push(left[0][column] <= right[0][column] ? left.shift() : right.shift());
    }
    while (left.length) {
      out.push(left.shift());
    }
    while (right.length) {
      out.push(right.shift());
    }
    this.setState({sites: out});
    return out;
  }
  render () {
    const siteArr = this.state.sites;
    const sites = this.state.sites.map((site) => {
      return (
          <Site site={site} key={site.id} /> 
        );
    });
    const site_number = sites.length;
    return (
        <div>
          <table>
            <thead>
              <tr>
                <th><a onClick={(evt) => this.sortColumn(siteArr, evt)}>Name</a></th>
                <th><a onClick={(evt) => this.sortColumn(siteArr, evt)}>City</a></th>
                <th><a onClick={(evt) => this.sortColumn(siteArr, evt)}>State</a></th>
              </tr>
            </thead>
            <tbody>
              {sites}
            </tbody>
          </table>
        </div>
    );
  }

a) 如何将事件对象传递给 sortColumn 函数？

b) 如何通过事件对象访问列值？

感谢您提供的任何帮助！

【问题讨论】：

您期望event.target.value 等于什么？内部文本值，例如 Name 或 City ?
嗯，这不是event.target.value 给你的，但看起来你在这里不需要它，因为你已经在它旁边有了文本值。为什么不只是() => this.sortColumn(siteArr, 'Name')？
这完全可行——谢谢，azium。我想我只是不确定如何从事件对象访问该信息。我想一定有办法。

标签： javascript reactjs

【解决方案1】：

对于您的情况，因为您已经知道文本值是什么，只需将其传递给您的函数：

() => this.sortColumn(site‌Arr, 'Name')

但是，如果你想获取目标的 innerText 值，那就是你使用的：

event => this.sortColumn(siteArr, event.target.innerText)

【讨论】：