div 的 id 属性未定义/未在react应用程序中被捕获

IT技术 javascript html reactjs
2021-04-10 21:47:12

我正在从 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
}

问题：

每当className='one'单击外部 div ( ) 时，控制台都会记录未定义的日志。但是，如果我将 id 值分配给内部 div ( className='two') 它仅当在内部 div 的尺寸内进行点击时才记录 id 的值。<span>和<p>标签的情况也是如此。

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

预期结果：

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

5个回答

问题是当你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>

经历了这一切，我认为这将是以正确方式处理这个问题的最佳解决方案。创建一个单独的组件并将 id 作为 props 传递不仅会更干净，而且也是一种有效的解决方案。
2021-05-25 21:47:12
也看看这个答案，它可以帮助stackoverflow.com/questions/45053622/...
2021-06-14 21:47:12
谢谢 Shubham，正是我想要的。
2021-06-21 21:47:12

好的，问题不是 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，因此，这是事件目标更改的时候

在构造函数中，只需放置以下行：

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

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

有关更多详细信息，请访问此链接：https : //reactjs.org/docs/handling-events.html

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

handleClick = (e) => {
  console.log(e.target.id)
  // other stuff
}
我的代码中已经有了它，只是没有把它放在问题中。
2021-05-31 21:47:12

如果你已经在使用 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 调用方法，我就完成了

@JoseAPL 现在我删除了匿名函数。没有理由因此而拒绝投票。但现在它不会重新渲染
2021-05-27 21:47:12
匿名函数一直导致重新渲染，因为每次渲染这个组件时它都会返回一个新的引用
2021-05-30 21:47:12
this.handleClick.bind 也会导致相同的效果，因为您正在绑定一个新的引用，它必须是一个内部函数绑定一次，我这样做是因为这会导致 React 项目的性能问题！
2021-05-31 21:47:12
您不应该这样做，因为 bind 每次都会返回一个新函数。看到这个问题stackoverflow.com/questions/45053622/...
2021-06-04 21:47:12
其它你可能感兴趣的问题
上一篇警告：文本内容不匹配。服务器：“我出去了” 客户：“我出去了” div 下一篇超出最大调用堆栈大小 - 连接的 React 组件