Question

我在reactjs代码的render部分中有以下内容：

<li><a  id="profile" ref="profile"
onClick={() => this.handleClickOnLink("profile")}>Profile</a></li>

到目前为止一切顺利。但是我不喜欢“profile”，它是硬编码元素的id。相反，我想像这样传递它：

<li><a  id="profile" ref="profile"
onClick={() => this.handleClickOnLink(this.id)}>Profile</a></li>

但它不起作用。知道如何以正确的方式做到这一点吗？

Answer 1

问题是箭头功能不会绑定它自己的ssh。相反，它实际上是指原始上下文。阅读docs。

实现所需目标的一种可能方法是使用this对象：

event.target

handleClickOnLink(event) { console.info('elem id:', event.target.id); } render() { return ( <ul> <li> <a id="profile" href="#" onClick={this.handleClickOnLink}> Profile </a> </li> </ul> ); }（SyntheticEvent）对象传递给元素事件处理程序，如event。阅读更多here，以及如何向事件处理程序提供extra arguments。

请注意，onClick函数需要正确绑定到类构造函数中的组件实例，或将其更改为箭头函数。

＆＃13;

handleClickOnLink

＆＃13;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOnLink = this.handleClickOnLink.bind(this);
  }
  handleClickOnLink(e) {
    console.info('elem id ->', e.target.id);
  }
  render() {
    return (
      <ul>
        <li>
          <a id="profile" href="#" onClick={this.handleClickOnLink}>
            Profile
          </a>
        </li>
        <li>
          <a id="extra" href="#" onClick={this.handleClickOnLink}>
            Extra
          </a>
        </li>
      </ul>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

＆＃13;

Answer 2

您可以通过ref的{{1}}获取ID。您正在使用旧版<a>，因此我将采用新的方式。

ref

Answer 3

这是代码。您可以在不使用ref的情况下完成此操作并使用该事件

handleClickOnLink(e,data){
  console.log(e.target.id,data);
}

<li>
    <a id="tester" onClick={(e) => 
       this.handleClickOnLink(e,"profile")}>
       Profile
    </a>
</li>

如何在render中获取元素的id并将其传递给函数

3 个答案: