Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在React的onClick函数中传递事件对象_Javascript_Reactjs - Fatal编程技术网

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

Javascript 在React的onClick函数中传递事件对象,javascript,reactjs,Javascript,Reactjs,我有一个React应用程序,在其中单击列标题时,表会对数据进行排序(通过合并排序) 我想传递数据(即一个对象数组)和事件对象。我想使用event对象获取单击的列的值,然后使用它对数据进行排序 但是,我一直收到一条错误消息,表示事件对象未定义 以下是代码的相关部分: sortColumn (siteArr, evt) { if (siteArr.length < 2) { return siteArr; } else { const column

我有一个React应用程序,在其中单击列标题时,表会对数据进行排序(通过合并排序)

我想传递数据(即一个对象数组)和事件对象。我想使用event对象获取单击的列的值,然后使用它对数据进行排序

但是,我一直收到一条错误消息,表示事件对象未定义

以下是代码的相关部分:

  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>
    );
  }
sortColumn(siteArr,evt){
如果(场地长度<2){
返回站点arr;
}否则{
const column=evt.target.value;//evt返回未定义的
常数中点=数学圆(siteArr.length/2);
const subfile=this.sortColumn(siteArr.slice(0,中点));
const subRight=this.sortColumn(siteArr.slice(中点));
返回此.merge(列、子项、子项);
}
}
合并(列、左、右){
常数输出=[];
while(left.length&&right.length){
out.push(左[0][列]{
返回(
);
});
const site_number=sites.length;
返回(
this.sortColumn(siteArr,evt)}>Name
this.sortColumn(siteArr,evt)}>City
this.sortColumn(siteArr,evt)}>状态
{sites}
);
}
a) 如何将事件对象传递给sortColumn函数

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


谢谢你能提供的任何帮助

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

() => this.sortColumn(site‌​Arr, 'Name')
但是,如果要获取目标的innerText值,则可以使用:

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

您希望
event.target.value
等于多少?像Name或City这样的内部文本值?这不是
event.target.value
提供给您的,但是它看起来不需要,因为您已经在它旁边有了文本值。为什么不干脆把这个.sortColumn(siteArr,'Name')?这完全可以用——谢谢你,azium。我想我只是不确定如何从事件对象访问这些信息。我想一定有办法。