使用箭头函数:

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

这将创建一个新函数，该函数使用正确的参数调用handlesort。

将其提取到子组件中。在render调用中使用箭头函数的问题在于，它每次都会创建一个新函数，最终导致不必要的重新呈现。

如果您创建一个子组件，您可以传递handler并使用props作为参数，然后仅当props更改时才重新呈现（因为handler引用现在永远不会更改）:

子组件

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

主要成分

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

旧简易方式(ES5)

使用.bind传递所需的参数，这样可以将函数与组件上下文绑定:

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

这里有很好的答案，我同意@Austin Greco（第二个选项，有独立的组件）
还有一种我喜欢的方式，currying.
您可以做的是创建一个接受参数（您的参数）的函数，并返回另一个接受另一个参数的函数（在本例中为click事件）。然后你可以自由地用它做任何你想做的事。

ES5:

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6:

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

你会这样使用它:

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

下面是这样一个用法的完整示例:

null

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如今，随着ES6，我觉得我们可以使用一个更新的答案。

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

基本上，因为onclick期望传递给它一个函数，所以bind可以工作，因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，它只调用我们想要的函数，并保留this。您应该永远不需要在React中绑定render方法，但是如果由于某种原因在某个组件方法中丢失了this:

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}