简短回答

Question

我正在尝试获取被单击的react组件的名称。

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

handleClick(e) {
   console.log("I WANTED TO PRINT 'MyComponent' HERE")
}

render() {
   <MyComponent onClick={this.handleClick}>
}

我可以通过使用诸如data-或name=之类的附加道具来做到这一点，但我想知道是否存在一种无需多次输入即可获取MyComponent的方法。

我要这样做的原因是，我可以获取组件的名称，以便更改CSS使其突出显示。

Answer 1

好的，我告诉你答案。即使这是重复的，我也会告诉你答案是什么。

简短回答

是的……但是很复杂。

长答案

让我们从这个简单的类开始：

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

handleClick(){
  console.log("Component");
}
render(){
  return (
    <div>
      <Component onClick={this.handleClick} />
    </div>
  )
}

那又是什么？首先，您希望组件位于handleClick()函数中。就是这么简单：

constructor(props){
  super(props);
  this.state = {
    name: "Component"
  }
  this.handleClick = this.handleClick.bind(this);
}

handleClick(){
  // or whatever you want to do with it, just replace "Component" with this.state.name
  console.log(this.state.name);
}
render(){
  return (
    <div>
      <Component onClick={this.handleClick} />
    </div>
  )
}

所以我要做的是添加一个新的this.state.name，然后在handleClick()函数中使用它。这是bind(this)行的充分理由。因此，在bind(this)之后，该函数将能够直接访问state。如果要更改this.state.name，请使用this.setState({name: /* whatever you want it to change to */ })。

这比注释中指出的答案有效一点，因为对于注释中指出的答案，如果您有多个<Component />，则必须更多地使用“组件”超过2倍。取而代之的是，使用此解决方案，您仍然只需要使用“组件”两次即可。

但是几乎仍然没有办法只使用1次“组件”。为什么？因为答案和更多内容都对“ Component”有2个引用或更多引用，因为没有办法将return内部的标记名称直接直接连接到类的外部。您可能想要的<{this.state.name} />不存在。有一些方法可以做到这一点，但是它们仍然很复杂。

获取反应组件onClick的名称

1 个答案:

简短回答

长答案