javascript - 将按高排序和低排序结合到一个函数中进行 react

Question

我有 2 个工作函数，可以让我按价格高/低排序 handleSortCheapest 和 handleSortExpense，我想做的是将它们组合成 1 个函数 handleSort 将通过 onCLick 函数调用，传递给它的参数将确定它是高排序还是低排序，例如 onClick={()=> this.handleSort(high)}

我试图编写一个函数来执行此操作，但它不起作用，那么我如何创建一个函数来执行此操作？

handleSortCheapest = () => {
          this.setState({
            sortValue: this.state.data.sort((a,b) => (parseFloat(a.price) - parseFloat(b.price)))
          })
        }

    // Sort price high to low
    handleSortExpensive = () => {
      this.setState({
        sortValue: this.state.data.sort((a,b) => (parseFloat(b.price) - parseFloat(a.price))),
      })
    }


    handleSort = value => {
      const low = this.state.data.sort((a,b) => (parseFloat(a.price) - parseFloat(b.price)))
      const high = this.state.data.sort((a,b) => (parseFloat(b.price) - parseFloat(a.price)))
      this.setState({
        sortValue: value
      })
    }

    onClick={()=> this.handleSort(high)}
    onClick={()=>this.handleSort(low)}

Answer 1

我猜测“不起作用”的含义，并且我假设 onClick 设置是 JSX 内容的一部分，例如 render() 内。我还假设 data 是一个数组，它是对象状态的一部分。

一个问题是，high 和 low 在分配给 handleSort arrow-function 的匿名函数的范围之外无效。即使这确实有效，我可能只会使用 boolean 参数来 handleSort() 而不是传递函数。

handleSort = ascending => {
   this.setState( {
       sortValue: ascending 
                  ? this.state.data.sort((a,b) => (parseFloat(a.price) - parseFloat(b.price)))
                  : this.state.data.sort((a,b) => (parseFloat(b.price) - parseFloat(a.price)))
   } )
}

然后在 JSX 渲染代码中调用它:

render(
   … onClick={() => this.handleSort(true)} … // ascending, low to high
   … onClick={() => this.handleSort(false)} …     // descending, high to low
)