我猜 .click 函数来自 jquery 但我在 pure 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>
我的想法是在写完消息后按下回车键,onKeyUp 将它转到事件处理程序并运行 getElementByClassName().click()
并提交消息(运行 onClick)。如果我错了,我不能使用 click in react,我该如何实现呢?两个 console.logs 都正常工作,所以问题出在 click()(我猜)
这里是 whole code
最佳答案
这里有三个独立的问题。
您正在尝试对
getElementsByClassName
的结果调用click
。那returns a collection of elements ,不只是一个元素。click
函数存在于元素上,而不是它们的集合。调用按钮上的
click
函数不会触发 React 的onClick
处理程序。*通过 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>
关于javascript - .click() 在 react 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43569385/