代替
onKeyPress
,使用 onKeyDown
来检测 keyCode
事件。
<input type="text"
style={{marginTop:'20%', marginLeft:'40%'}}
value={value}
onFocus={onFocus}
onChange={e => setValue(e.target.value)}
onKeyDown={(e) => this.handleKeyPress(event)}
/>
函数会是这样的,
handleKeyPress(e){
if(e.keyCode === 13){
e.target.blur();
//Write you validation logic here
}
}
使用
refs
和 this.inputRef.current.blur()
。这是可行的解决方案。
class App extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.state = {
value: ""
};
}
keypressHandler = event => {
if (event.key === "Enter") {
this.setState({ value: this.inputRef.current.value });
this.inputRef.current.blur();
this.inputRef.current.value = "";
}
};
render() {
return (
<div>
<label>Enter Text</label>
<input
type="text"
ref={this.inputRef}
onKeyPress={event => this.keypressHandler(event)}
/>
<p>{this.state.value}</p>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />
一行是:
<input
...
onKeyDown={(e) => (e.key === "Escape") && e.target.blur()}
/>