在 React 中按下输入键时如何获得 TextField 值？

当用户从键盘上按回车键时，我想传递 TextField值。在 onChange()事件中，我得到了 textbox的值，但是当按下 enter键时如何得到这个值呢？

密码:

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} />
)
}
}
168932 次浏览
小开

html

<input id="something" onkeyup="key_up(this)" type="text">

script

function key_up(e){
var enterKey = 13; //Key Code for Enter Key
if (e.which == enterKey){
//Do you work here
}
}

下次，请尝试提供一些代码。

小开
最佳答案

使用 onKeyDown事件，并在该事件中检查用户按下的键的密钥代码。键码 Enter键是13，检查代码并把逻辑放在那里。

看看这个例子:

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' />

注意: 将 input元素替换为 Materials-Ui TextField并定义其他属性。

小开

添加 onKeyPress 将对“文本字段中的更改”起作用。

<TextField
onKeyPress={(ev) => {
console.log(`Pressed keyCode ${ev.key}`);
if (ev.key === 'Enter') {
// Do code here
ev.preventDefault();
}
}}
/>
小开 
<input onKeyPress={onKeyPress}/>


const onKeyPress = (e: any) => { if (e.which == 13) { // your function }};
小开

You can use e.target.value to get the current value of the input element if you're using 不受控制 mode.

<TextField
onKeyPress={(e) => {
if (e.key === 'Enter') {
alert(e.target.value);
}
}}
/>

现场演示

Codesandbox Demo


提交答案