从反应js中的onClick事件获取对象数据和目标元素

Question

这是我的代码。我想使用 onClick 事件获取对象和目标元素中的数据。谁能帮我。

 handleClick = (data) => {
    console.log(data);
}

<input type="checkbox" value={data.id} defaultChecked={false} onClick={this.handleClick.bind(null, data)}/>

原文由 Sunil tc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 onClick 处理程序中使用箭头函数怎么样？

 handleClick = (e, data) => {
    // access to e.target here
    console.log(data);
}

<input type="checkbox" value={data.id} defaultChecked={false} onClick={((e) => this.handleClick(e, data))}/>

原文由 Jakob Lind 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 data- 元素属性，它们将在目标元素中可用：

 import React from 'react'

export default MyComponent = () => {
  const onClick = event => {
    console.log(event.target.dataset.user)
  }

  return <div data-user="123" onClick={onClick}>Click me!</div>
}

原文由 Cory Robinson 发布，翻译遵循 CC BY-SA 4.0 许可协议