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，然后在event函数中获得toggle。接下来，我将单击按钮Red或Blue。然后，我想将我之前单击过的特定red-color的类更改为blue-color或Text。我如何在父组件中获取事件以找到特定的text或有其他方法可以做到这一点？

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

Answer 1

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

以这种方式尝试不要在父组件中绑定功能，然后尝试，您将获得目标

Answer 2

您没有正确使用“绑定”。您不需要绑定匿名函数。

class Hello extends React.Component {
  render() {
    return (
    <div>
      <p onClick={(e) => this.toggle(e)}>
        Test
      </p>
    </div>);
  }

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

通过切换事件变量，您可以根据需要执行更改。

Answer 3

我找到了添加event.persist();以获得父组件内部event.target的确切解决方案。

如何在ReactJS的父组件内部获取事件目标

3 个答案: