javascript - onclick 事件在多个原因上总是触发第一个 div-JS/REACTJS

Question

我有 2 个 div，上面有一个 onclick 事件。

js:

<div>
 <div class="test" onClick={this.getTest.bind(id)}><a>delete</a></div>
 <div class="test2" onClick={this.getTest2.bind(query)}></div>
</div>

getTest(id) {
  //some code
}

getTest2(query) {
  //some code
}

现在，由于某种原因，当我单击带有 class="test2"的第二个 div 时，默认情况下它总是进入第一个 div，并且我检查了 event.target ，它始终包含单击的第一个 div 目标。我还尝试应用 onclick关于<a>标签，但仍然相同。我不明白如何防止这种情况发生。有什么想法吗？？

Answer 1

因为您没有正确绑定(bind)事件，请使用这些click事件:

onClick={this.getTest.bind(this,id)}

onClick={this.getTest2.bind(this,query)}

检查工作代码:

class App extends React.Component{

   getTest(id){console.log('div1', id)}
   
   getTest2(id){console.log('div2', id)}

   render(){   
       return(       
            <div>
                <div class="test" onClick={this.getTest.bind(this, '1')}><a>Div 1</a></div>
                <div class="test2" onClick={this.getTest2.bind(this, '2')}>Div 2</div>
            </div>       
       )   
   }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<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 ='app'/>