Question

我正在从api响应中映射数据并从中呈现多个div。与此同时，我将从响应中为每个div的id属性分配一个唯一的ID，如下所示：

...lists.map(list => {
  return (
  <div className='one' key={list.id} id={list.id} onClick={this.handleClick}>
    <div className='two'>
      <p>Hello World</p>
      <span>Foo Bar</span>
    </div>
  </div>
)
})

handleClick = (e) => {
  console.log(e.target.id)
  // other stuff
}

问题：

每当单击外部div（className='one'）时，控制台都会记录未定义。但是，如果我将id值分配给内部div（className='two'），则仅当在内部div的维度内进行单击时，才会记录id 的值。 <span>和<p>标记也是如此。

基本上，onClick会在点击不同的html元素时返回不同的目标。

预期结果：

单击父div或该div内的任何位置应始终返回父div的id属性的值。

Answer 1

问题是，当您在onClick父级上定义topMost时，您需要使用e.currentTarget.id而不是e.target.id，因为e.target会为您提供元素您单击了哪个，而不是定义了onClick侦听器的父级

class App extends React.Component {
state = {
  lists: [{id: 1}, {id: 2}, {id:3}]
}
render() {
  return (
    <div>
      {this.state.lists.map(list => {
          console.log(list.id)
          return (
          <div className='one' key={list.id} id={list.id} onClick={this.handleClick}>
            <div className='two'>
              <p>Hello World</p>
              <span>Foo Bar</span>
            </div>
          </div>
        )
       })
       }
    </div>
  )
}

handleClick = (e) => {
  console.log(e.currentTarget.id)
  
  // other stuff
}

}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Answer 2

好的，问题不在于Reactjs，问题是事件目标。

当您必须使用e.target时，您正在使用event.currentTarget，这就是区别。

target是触发事件的元素（例如，用户点击了）
currentTarget是事件侦听器附加到的元素。

让我们在一个例子中看到这一点：

let tacos = [{
 	person: "John",
  ingredient: 'Guacamole'
 }, {
 	person: 'Sally',
  ingredient: 'Beef'
 }];

class App extends React.Component {

  render() {
    return (
      <div>
        <h3>List of tacos:</h3>
        <TacosList tacos={tacos} />
      </div>
    );
  }
}

class TacosList extends React.Component {
	constructor(props) {
  	super(props);

    this.handleClick = this.handleClick.bind(this);
  }
	
  handleClick(event) {
  	const currentTarget = event.currentTarget;
    
    console.log(event.target);
    console.log(currentTarget.id);
  }
  
  render() {
    return (
      <div>
        {this.props.tacos.map((taco, index) => (
					<div className="one" id={`reference-${index}`} key={index} onClick={this.handleClick}>
          	<p>{taco.person}: {taco.ingredient}</p>					  
					</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.one {
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>

请注意，您可以点击div和p元素，两者都会触发事件，如果是p，它会将事件传播到div因此，当事件目标发生变化时

Answer 3

在构造函数中，只需输入以下行：

constructor() {
     this.handleClick = this.handleClick.bind(this);
}

在此之后，您将能够访问元素的引用

有关详细信息，请浏览此链接： https://reactjs.org/docs/handling-events.html

Answer 4

尝试将事件设置为函数参数

handleClick = (e) => {
  console.log(e.target.id)
  // other stuff
}

Answer 5

如果您已经在使用ES6

我会稍微更改一下代码，因此更容易理解并使用events目标和属性

时没有特殊故障

lists.map(list => {
    return (
       <div 
           className='one' 
           key={list.id} 
           onClick={this.handleClick.bind(this, list.id)

           <div className='two'>
             <p>Hello World</p>
             <span>Foo Bar</span>
           </div>
       </div>
    )
 })

 handleClick = (listId) => {
   console.log(listId)
   // other stuff
 }

正如您在此处所见，我只是使用列表ID调用方法并且我已完成

div的id属性未定义/未在响应应用中点击onClick

5 个答案: