Javascript 在react js中按下回车键时如何获取输入文本字段值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43384039/
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
How to get input textfield values when enter key is pressed in react js?
提问by Soumya Behera
I want to pass textfieldvalues when user press enter key from keyboard. In onChange()event, I am getting the value of the textbox, but How to get this value when enterkey is pressed ?
我想textfield在用户从键盘按下回车键时传递值。在onChange()事件中，我正在获取 的值textbox，但是如何在enter按下键时获取此值？
Code:
代码：
import TextField from 'material-ui/TextField';
class CartridgeShell extends Component {
constructor(props) {
super(props);
this.state = {value:''}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({ value: e.target.value });
}
render(){
return(
<TextField
hintText="First Name"
floatingLabelText="First Name*"
value={this.state.value}
onChange={this.handleChange}
fullWidth={true} />
)
}
}
回答by Mayank Shukla
Use onKeyDownevent, and inside that check the key code of the key pressed by user. Key code of Enterkey is 13, check the code and put the logic there.
使用onKeyDown事件，并在其中检查用户按下的键的键码。key的Enterkey code是13，检查代码，把逻辑放在那里。
Check this example:
检查这个例子：
class CartridgeShell extends React.Component {
constructor(props) {
super(props);
this.state = {value:''}
this.handleChange = this.handleChange.bind(this);
this.keyPress = this.keyPress.bind(this);
}
handleChange(e) {
this.setState({ value: e.target.value });
}
keyPress(e){
if(e.keyCode == 13){
console.log('value', e.target.value);
// put the login here
}
}
render(){
return(
<input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange} fullWidth={true} />
)
}
}
ReactDOM.render(<CartridgeShell/>, 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' />Note:Replace the inputelement by Material-Ui TextFieldand define the other properties also.
注意：用inputMaterial-Ui替换元素TextField并定义其他属性。
回答by sunaina kotekar
Adding onKeyPress will work onChange in Text Field.
添加 onKeyPress 将在文本字段中使用 onChange。
<TextField
onKeyPress={(ev) => {
console.log(`Pressed keyCode ${ev.key}`);
if (ev.key === 'Enter') {
// Do code here
ev.preventDefault();
}
}}
/>
回答by manish
html
html
<input id="something" onkeyup="key_up(this)" type="text">
script
script
function key_up(e){
var enterKey = 13; //Key Code for Enter Key
if (e.which == enterKey){
//Do you work here
}
}
Next time, Please try providing some code.
下次，请尝试提供一些代码。
