如何在 onClick React 中调用具有不同参数的 SAME 函数的多个实例？答案

【问题标题】：How to call multiple instance of the SAME function with different arguments in onClick React?如何在 onClick React 中调用具有不同参数的 SAME 函数的多个实例？
【发布时间】：2019-03-07 03:40:52
【问题描述】：

我正在模态窗口中实现表格排序。我写了这段代码，但它不正确。

<ExtendedModalBar
  list={this.state.modalList}
  onCancel={this.handleExtendedModalClose}
  onSave={(...args) => this.handleSaveFromModal(...args)}
  selectedItems={this.state.modalItems}
  show={this.state.showExtendedModal}
  type={this.state.modalType}
  //onClick={this.onSort('', )}
  sortColumn={this.onSort('isSecure', this.state.modalList); this.onSort('profile', this.state.modalList)}
/>

我的功能：

 onSort = (column, dataToSort) => (event) => {
    const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc';

    dataToSort.sort((a, b) => {
      if ( typeof(a[column]) === 'string' && typeof(b[column]) === 'string' ) {
        const nameA = a[column].toUpperCase(); // ignore upper and lowercase
        const nameB = b[column].toUpperCase(); // ignore upper and lowercase

        if (nameA < nameB ) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        // names must be equal
        return 0;
      }

      if( typeof(a[column]) === 'number' && typeof(b[column]) === 'number'){
        return a[column] - b[column];
      }

      if(typeof(a[column]) === 'boolean' && typeof(b[column]) === 'boolean'){
        const firstBool = +(a[column]);
        const secondBool = +(b[column]);
        return firstBool - secondBool;
      }

    }
    );

    if (direction === 'desc') {
      dataToSort.reverse();
    }

    this.setState({
      sort: {
        column,
        direction,
      }
    });
  };

我的排序函数接受两个参数，columnName 和 data。如果我只在 onClick 中调用该函数一次，它只会对一列进行排序。如何多次调用函数并传递不同的参数，即不同的列名？

【问题讨论】：

您尝试过类似onClick={() => ... the code in sortColumn...} 的方法吗？如果您对相同的组数据调用两次onSort，它是否对它进行了适当的排序？
有点不懂。我需要将每个 columnName 作为字符串传递给我的 onSort 函数，以便对表的每一列进行排序，而不仅仅是一个确切的列。是的，集合是相同的，但函数也接受列名
请看我的功能。我已经编辑了问题

标签： javascript reactjs function sorting events

【解决方案1】：

也许问题与以下有关：onClick 属性需要只有一个函数。我会尝试这样的事情：

onClick={(event) => 
    this.onSort('isSecure', this.state.modalList)(event); 
    this.onSort('profile', this.state.modalList)(event);
}

或一些更优雅但等效的代码。希望它有所帮助 - 卡洛斯

【讨论】：

如果我写了这个：onClick={(event) => this.onSort('isSecure', this.state.modalList)(event); this.onSort('profile', this.state.modalList)(event); } 编译器说这是预期的语法错误“}”
我已经克服了语法错误的问题，但是现在只排序了一列，第二列没有。
奇怪！您能否在onSort 函数中添加console.log 或alert 语句，以确保它只被调用一次？
您上面的代码给出了语法错误。我写了这个： sortColumn={(e) => {this.onSort('isSecure', this.state.modalList)(e); this.onSort('profile', this.state.modalList)(e);}} 和语法错误被删除，我添加了控制台日志，我得到了两次日志，但只有一列排序
因此问题出在功能上。我猜想虽然要排序的 criteria 仅与所选列相关，但您要排序的 array 是整个数组。如果您希望列彼此独立排序，则为每列设置不同的数组会更方便。您的 modalList 可能是一个包含所有数组的对象。当然，这会使render 更加复杂，但我无法想象一个更简单的替代方案。回想一下您传递的函数，例如to Array.map 有一个额外的 index 参数。