Question

这是我的代码。我希望将对象和数据中的两个数据都获取使用onClick事件的目标元素。谁能帮我。

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

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

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))}/>

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>
}

Answer 3

尝试以下代码变体：

handleClick = (data, e) => {
    console.log(e.target.value, data);
}

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

Answer 4

首先，如果绑定null，则不会获得任何上下文或UIEvent对象。

您需要将onClick更改为“onClick = {this.handleClick}”。

你的句柄功能应该是

handleClick = (event) => {
    const { target: { value } } = event;

    // And do whatever you need with it's value, for example change state 
    this.setState({ someProperty: value });
};

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

4 个答案: