反应如何将对象发送到 onClick 事件答案

【问题标题】：React how to send object to onClick event反应如何将对象发送到 onClick 事件
【发布时间】：2020-08-07 18:56:40
【问题描述】：

如何在响应中将对象发送到 onClick 事件？我有一个项目列表，其中每个项目都与状态对象中的对象相关。它是在组件的 getList() 方法中创建的：

import React from 'react';
import ReactDOM from 'react-dom';

function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [
            {id:1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}
        ]
    }

    return (
        <div> 
            {getList()}
        </div>
    )

    function getList()
    {
        let items = state.list.map(item => { return (<li key={item.id} onClick={handleClick} className={item.id > 5 ? 'green' : 'red'}>item: {item.name}</li>) });
        return <ul>{items}</ul>
    }


    function handleClick(event) {  // Here I want to get item + event object as params
        alert(event);
    }
}

export default ItemsList;

if (document.getElementById('itemsList')) {
    ReactDOM.render(<ItemsList />, document.getElementById('itemsList'));
}

如何将项目对象发送到 onClick 事件？

【问题讨论】：

onClick={(e) => handleClick(e, item)}
是的，我有。谢谢。

标签： javascript reactjs onclick

【解决方案1】：

哦，当我写这个问题时，我尝试从 onclick 调用匿名函数，它可以工作

onClick={e => {handleClick(item, e)}}

【讨论】：

【解决方案2】：

只是增加了一种方式：-

const myCustomOnClick = (e: Event || EventArgsType): clickType => handleClick(item,e)

onClick={this.myCustomOnClick} -- 类组件

onClick={myCustomOnClick} -- 函数式或钩子或可组合组件

【讨论】：