javascript - 如何在ReactJS中获取父组件内的事件目标

Question

我有一个带有代码的主要组件

changeColor = (color) => {

}

toggle = (e) => {
  console.log(e.target)
}

<div>
  <EditComponent changeColor={this.changeColor.bind(this)}>
  <TextComonent toggle={this.toggle.bind(this)}>
</div>

编辑组件是

color = (value) => {
  this.props.changeColor(value)
}
<div>
  <button value='red' onClick={this.color.bind(this,"red")}>Red</button>
  <button value='blue' onClick={this.color.bind(this,"blue")}>Blue</button>
</div>

文本组件是

toggle = (e) => {
  this.props.toggle(e)
}
<div>
  <p class="black-color" onClick={this.toggle.bind(this)}>Text 1</p>
  <p class="black-color" onClick={this.toggle.bind(this)}>Text 2</p>
</div>

我将首先单击Text 1或Text 2，然后我将在toggle内获取事件功能。接下来，我将单击按钮Red 或Blue。然后，我想将我之前单击过的特定 Text 类更改为 red-color 或 blue-color 。如何在父组件内获取事件以查找特定的文本或者有其他方法吗？

我想获取父组件内的event.target。我在父级中获得了 event 对象，但 event.target 为 null

Answer 1

<div>
 <EditComponent changeColor={this.changeColor.bind(this)}>
 <TextComonent toggle={this.toggle}>
 </div>

尝试这种方式，不要在父组件中绑定(bind)函数并尝试，你会得到目标