javascript ReactJS OnKeyPress 触发按钮按下
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45949874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS OnKeyPress to trigger a button press
提问by chakolatemilk
I'm very new to ReactJSand I'm just trying to do some small things to understand more.
我对ReactJS很陌生，我只是想做一些小事情来了解更多。
I was wondering if the OnKeyPresscan trigger a button press. I've seen a few similarquestions but what the OnKeyPresstriggered was just a console.log or an alert. So I wasn't sure how to trigger the button press.
我想知道OnKeyPress 是否可以触发按钮按下。我见过一些类似的问题，但OnKeyPress触发的只是 console.log 或警报。所以我不确定如何触发按钮按下。
This is what I have so far:
这是我到目前为止：
class Form extends React.Component {
onButtonPress = (e) => {
// this is just an example of what happens when the button is pressed.
this.setState({isClicked: true});
}
keyPress = (event) => {
if (event.key == 'Enter'){
// How would I trigger the button that is in the render? I have this so far.
this.onButtonPress();
}
}
render() {
return (
<div>
<div className="fieldForm">
<input
value={name}
type="name"
onKeyPress={this.keyPress}
/>
</div>
<Button onClick={this.onButtonPress}>Submit</Button>
</div>
)
}
}
Please note that I didn't include everything in here such as the constructor, props, or the state object attributes.
请注意，我没有在此处包含所有内容，例如构造函数、道具或状态对象属性。
The purpose of this is to make it look like the button has been clicked. When the button is clicked, it'll show a small loading sign on the button. I want the same thing to happen if I were to press enter (with the loading sign on the button, that's why I want the button pressed).
这样做的目的是让它看起来像按钮已被点击。当按钮被点击时，它会在按钮上显示一个小的加载标志。如果我按下回车键（按钮上有加载标志，这就是我想要按下按钮的原因），我希望发生同样的事情。
Is this possible?
这可能吗？
采纳答案by elas
Programmatically triggering DOM events is not something you should do unless you have very specific needs.
除非您有非常特殊的需求，否则您不应该以编程方式触发 DOM 事件。
Both onKeyPressand onClickare event handlers, you can do anything you want when an event happens. I would just call a function that sets the state you want from both handlers.
这两个onKeyPress和onClick是事件处理程序，你可以做你想做的，当事件发生什么。我只会调用一个函数来设置你想要的两个处理程序的状态。
Here's an example:
下面是一个例子：
class Form extends React.Component {
handleFormSubmit = () => {
this.setState({ isClicked: true });
};
handleButtonPress = () => {
this.handleFormSubmit();
};
handleKeyPress = event => {
if (event.key == 'Enter') {
this.handleFormSubmit();
}
};
render() {
return (
<div>
<div className="fieldForm">
<input value={name} type="name" onKeyPress={this.handleKeyPress} />
</div>
<Button onClick={this.handleButtonPress} loading={this.state.Load}>
Submit
</Button>
</div>
);
}
}
回答by Soorena
In case you have no other wayand you shouldclick on this element for some vague reason and the method that elassaid didn't workfor you. try this:
如果您没有其他方法并且您应该出于某种模糊的原因单击此元素并且elas所说的方法对您不起作用。试试这个：
onButtonPress = (e) => {
console.log('hi hi')
}
handleKeyPress = (event) => {
if (event.key === 'Enter') {
this.refs.but.click()
}
}
render () {
return (
<Layout>
<div>
<div className="fieldForm">
<input
value={'name'}
type="name"
onKeyPress={(e) => this.handleKeyPress(e)}
/>
</div>
<Button onClick={this.onButtonPress} ref="but">Submit</Button>
</div>
</Layout>
)
}
