您可以这样使用代码：

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

这里e表示事件对象，如果您想在句柄函数中使用preventDefault（）之类的事件方法，或者想获得e.target.name之类的目标值或名称。

我通过两种方式向方法添加了onclick事件值传递的代码。1.使用结合方法2。使用箭头（=>）方法。请参见handlesort1和handlesort方法

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

        </div>);
    }
});

可以在参数之间传递值

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

在这个场景中，我将列值传递给函数。

使用箭头功能：

您必须安装阶段2：

npm安装babel-preset-stage-2：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

我认为，React地图中的.bind（this，arg1，arg2，…）是错误的代码，因为它很慢！单个渲染方法中的.bind（this）的10-50-非常慢的代码。我是这样修复的：Render方法<tbody onClick={this.handleClickRow}>＜tr data id＝｛listItem.id｝＞的映射处理程序var id=$（ev.target）最近（'tr'）.data（）.id

完整代码如下：

类MyGrid扩展了React.Component{//实际上，我是从Redux中connect设置的道具中得到的状态={列表：[｛id:1，姓名：“Mike”｝，｛id:2，名称：“Bob”｝，｛id:3，名称：“弗雷德”｝],selectedItemId:3}渲染（）{const｛list，selectedItemId｝=this.stateconst｛handleClickRow｝=此返回(<表><tbodyonClick={handleClickRow}>｛list.map（listItem=>(<tr key＝｛listItem.id｝data id＝｛listItem.id｛className＝｛selectedItemId＝＝listItem.i？“selected”：“”｝><td>｛listItem.id｝</td><td>｛listItem.name｝</td></tr>))}</tbody></table>)}handleClickRow=（ev）=>{常量目标=ev.target//您可以使用您想要查找的带有ID的TR，我使用jQueryconst数据集=$（target）最近（'tr'）.data（）if（！dataset||！dataset.id）返回this.setState（｛selectedItemId:+dataset.id｝）alert（dataset.id）//玩得开心！}}ReactDOM.render（＜MyGrid/＞，document.getElementById（“ReactDOM”））表{边界塌陷：塌陷；}.选定td{背景色：rgba（0，0，255，0.3）；}<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js“></script><script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“react dom”></div>

React Hooks解决方案2022

const arr = [
  { id: 1, txt: 'One' },
  { id: 2, txt: 'Two' },
  { id: 3, txt: 'Three' },
]

const App = () => {
  const handleClick = useCallback(
    (id) => () => {
      console.log("ID: ", id)
    },
    [],
  )

  return (
    <div>
      {arr.map((item) => (
        <button onClick={handleClick(item.id)}>{item.txt}</button>
      ))}
    </div>
  )
}

您可以传递一个函数以使用Callback的返回，然后可以通过传递参数在渲染中正常调用函数！只需确保正确设置useCallback的依赖数组。

React>=16的最佳解决方案

我发现在不使用内联函数的情况下调用onClick、onChange等中具有多个参数的函数的最干净的方法是使用React 16和更高版本中提供的自定义数据属性。

const App = () => {
  const onClick = (e) => {
    const value1 = e.currentTarget.getAttribute("data-value1")
    const value2 = e.currentTarget.getAttribute("data-value2")
    const value2 = e.currentTarget.getAttribute("data-value2")
    console.log("Values1", value1)
    console.log("Values2", value2)
    console.log("Values3", value3)
  }
  return (
    <button onClick={onClick} data-value1="a" data-value2="b" data-value3="c" />
  )
}

上面的示例是针对功能组件的，但即使在类组件中，实现也非常相似。

这种方法不会产生不必要的重新渲染，因为您没有使用内联函数，并且可以避免使用这种方法绑定的麻烦。

它允许您在函数中传递任意数量的值。

如果要将值作为道具传递给子组件的onClick中使用的子组件，则也可以在那里使用此方法，而无需创建包装函数。

在您希望将对象的id传递给onClick的情况下，也可以使用对象数组，如下所示。

const App = () => {
  const [arrState, setArrState] = useState(arr)

  const deleteContent = (e) => {
    const id = e.currentTarget.getAttribute("data-id")
    const tempArr = [...arrState]
    const filteredArr = tempArr.filter((item) => item.id !== id)
    setArrState(filteredArr)
  }

  return (
    <div>
      {arrState.map((item) => (
        <React.Fragment key={item.id}>
          <p>{item.content}</p>
          <button onClick={deleteContent} data-id={item.id}>
            Delete
          </button>
        </React.Fragment>
      ))}
    </div>
  )
}