当使用函数而不是类时，这实际上相当容易。

    const [breakfastMain, setBreakFastMain] = useState("Breakfast");

const changeBreakfastMain = (e) => {
    setBreakFastMain(e.target.value);
//sometimes "value" won't do it, like for text, etc. In that case you need to 
//write 'e.target/innerHTML'
 }

<ul  onClick={changeBreakfastMain}>
   <li>
"some text here"
   </li>
<li>
"some text here"
   </li>
</ul>

下面是传递onClick事件值的示例。

我使用了es6语法。记住类内组件箭头函数不会自动绑定，所以在构造函数中显式绑定。

class HeaderRows extends React.Component {

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

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

您只需要使用Arrow函数来传递值。

<buttonClick={（）=>this.props.onClickHandle（“StackOverFlow”）}>

确保使用（）=>，否则将在没有单击事件的情况下调用单击方法。

注意：崩溃检查默认方法

请在下面的codesandbox中找到相同的运行代码。

用方法反应传递值

我认为，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>

这是一个非常简单的方法。

 onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) => (e) =>{
     console.log('value is'+data);  
 }

我通过两种方式向方法添加了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>);
    }
});