Jquery在react js中触发<ul><li>

Question

在react js ES6中，我有ul li a的onclick事件

<ul id="profiles">
<li><a href="" onclick="this.getValue('parameter')">Some Text</a></li>
<li><a href="" onclick="this.getValue('parameter')">Some Text</a></li>
<li><a href="" onclick="this.getValue('parameter')">Some Text</a></li>
<li><a href="" onclick="this.getValue('parameter')">Some Text</a></li>
</ul>

上面的代码在点击时运行良好。但是在正文加载时，我想触发其中一个li链接的click事件。

我用来触发点击事件的代码是：

$("#profiles li:nth-child(2) a").click();

但是上面写的jquery代码事件没有触发，请帮助我如何获得一个<li><a> </a></li>的身体负载上的点击事件

Answer 1

假设指向getValue的paramter描述了单击了哪个li's anchor元素，则可以直接在componentDidMount函数中调用getValue函数，如下所示

componentDidMount() {
    this.getvalues('Second li');
}

由于您使用的是ES6，因此可以使用ES6风格调用react onClick函数，如下所示

<ul id="profiles">
<li><a href="" onclick={this.getValue.bind(this,'parameter')}>Some Text</a></li>
<li><a href="" onclick={this.getValue.bind(this,'parameter')}">Some Text</a></li>
<li><a href="" onclick={this.getValue.bind(this,'parameter')}">Some Text</a></li>
<li><a href="" onclick={this.getValue.bind(this,'parameter')}">Some Text</a></li>
</ul>

不过，如果您想继续使用Jquery，则需要获得如下所示的DOMNode

$(ReactDOM.findDOMNode(this.myRefs[2])).click();

DOM

<ul id="profiles">
    <li><a href="" onclick={this.getValue.bind(this,'parameter')} ref={(inp) => this.myRefs[0] = inp}>Some Text</a></li>
    <li><a href="" onclick={this.getValue.bind(this,'parameter')} ref={(inp) => this.myRefs[1] = inp}>Some Text</a></li>
    <li><a href="" onclick={this.getValue.bind(this,'parameter')} ref={(inp) => this.myRefs[2] = inp}>Some Text</a></li>
    <li><a href="" onclick={this.getValue.bind(this,'parameter')} ref={(inp) => this.myRefs[3] = inp}>Some Text</a></li>
    </ul>