내가 전달하려는textfield
값을 가지는 경우 사용자 enter 키를 눌러서 키보드입니다. 에서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} />
)
}
}
사용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
요소에 의해 자료-UiTextField
과의 다른 속성한다.
추가 onKeyPress 작동 onChange 에서 텍스트를 입력 할 수 있습니다.
<TextField
onKeyPress={(ev) => {
console.log(`Pressed keyCode ${ev.key}`);
if (ev.key === 'Enter') {
// Do code here
ev.preventDefault();
}
}}
/>