Question

让我们渲染一些React Component，它的渲染效果如下：

render(){
  let links = [10, 50, 100, 500, 1000].map((num) => {
    return(
      <Link key={num} onClick={this.showParams.bind(this)} to={`/somePath/${num}`}>{num}</Link>
    )
  })
  return (
    <div>{links}</div>
  )
}

我在同一个组件中定义了以下函数：

showParams(){
  console.log(this.props.params);
}

每当我点击链接时，它都会在点击链接之前记录params值，而不是在点击链接之后。如何让我的react组件访问从此链接本身获取的props.params。或者我应该采取完全不同的方法。它确实感觉有点不需要onClick（我最终希望用这个新参数重置状态，这似乎是Link组件本身应该做的事情）。

如果这有助于我的路由器的相关部分：

<Route path='/somePath/:num' component={someComponent} />

Answer 1

ES6

使用箭头功能：

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

ES5

您可以使用.bind传递所需的参数：

return (
  <th value={column} onClick={that.handleSort.bind(that, column)}>{column}</th>
);

React Link onClick不利用当前的参数

1 个答案: