Question

我有2个工作函数可以让我按价格高/低handleSortCheapest和handleSortExpensive进行排序，我想要做的是将这些函数合并为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

我猜测什么＆＃34;没有工作＆＃34;意味着我假设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
)

将由高和低组合成一个函数进行反应

1 个答案: