.click（）在反应中不起作用

Question

我猜.click函数来自jquery，但我也在纯js中看到了，因此我希望我也可以在我的react代码中使用它。 我想使用它的事件看起来像

 keyUpFunction(event) {
    console.log(event.keyCode);
    event.preventDefault();
    if(event.keyCode == 13) {
        console.log("blya");
        document.getElementsByClassName('button').click();
    };
}
...
<input onChange={this.updateMessage} onKeyUp={this.keyUpFunction} value={this.state.message} type='text' placeholder="Message" />
<button className="button"  onClick={this.submitMessage} >Submit Message</button>

想法是在编写消息后，我将按Enter，onKeyUp将其转到事件处理程序并运行getElementByClassName().click()并提交消息（运行onClick）。 如果我错了并且不能使用click in react，该如何实施？ 两个console.logs都可以正常工作，所以问题出在click（）（我想）

这是整个代码

Answer 1

这里有三个独立的问题。

1. 你试图调用click的结果getElementsByClassName 。 这将返回元素的集合 ，而不仅仅是一个元素。 click函数存在于元素上，而不是元素的集合。

2. 在按钮上调用click函数不会触发React的onClick处理程序。*

3. 从根本上说，通过DOM间接工作并不是您在React中的工作方式。 （而且在非React代码中也是很差的做法。）

相反，只需从您的keyup处理程序中调用this.submitMessage ：

keyUpFunction(event) {
    event.preventDefault();
    if(event.keyCode == 13) {
        console.log("blya");
        this.submitMessage(event); // ****
    };
}

简化示例：

 class Input extends React.Component { constructor(...args) { super(...args); this.doSomething = e => { console.log("Do something"); }; this.keyup = e => { if (e.keyCode === 13) { this.doSomething(e); } }; } render() { return ( <div> <input className="button" type="text" onKeyUp={this.keyup} /> <input type="button" onClick={this.doSomething} value="Click Me" /> </div> ); } } ReactDOM.render( <Input />, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 

---

*上面的问题2的证明，以防其他人不确定（例如我，直到我尝试为止）：

 class Input extends React.Component { constructor(...args) { super(...args); this.doSomething = e => { console.log("Do something"); }; this.keyup = e => { if (e.keyCode === 13) { console.log("Calling `click`"); document.querySelector(".button").click(); } }; } render() { return ( <div> <input className="button" type="text" onKeyUp={this.keyup} /> <input type="button" onClick={this.doSomething} value="Click Me" /> </div> ); } } ReactDOM.render( <Input />, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>