reactjs - 如何获取渲染中元素的id并将其传递给函数

Question

我的reactjs代码的渲染部分有以下内容:

<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

问题是箭头函数没有绑定(bind)它自己的this。相反，它实际上指的是原始上下文。阅读 docs .

实现您需要的一种可能的方法是使用 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>
    );
}

event ( SyntheticEvent ) 对象被传递给元素事件处理程序，例如 onClick。了解更多 here ，以及如何提供extra arguments事件处理程序。

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

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'))

<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"></div>