Add example for keypress in editors

https://github.com/ag-grid/ag-grid-react/issues/60
This commit is contained in:
Sean Landsman
2017-08-10 16:02:03 +01:00
parent fa0881bfcf
commit 0d7cace354

View File

@@ -16,6 +16,7 @@ export default class MoodEditor extends Component {
} }
componentDidMount() { componentDidMount() {
this.refs.input.addEventListener('keydown', this.onKeyDown);
this.focus(); this.focus();
} }
@@ -23,6 +24,10 @@ export default class MoodEditor extends Component {
this.focus(); this.focus();
} }
componentWillUnmount() {
this.refs.input.removeEventListener('keydown', this.onKeyDown);
}
focus() { focus() {
setTimeout(() => { setTimeout(() => {
let container = ReactDOM.findDOMNode(this.refs.input); let container = ReactDOM.findDOMNode(this.refs.input);
@@ -47,11 +52,20 @@ export default class MoodEditor extends Component {
}; };
onKeyDown(event) { onKeyDown(event) {
if(this.isLeftOrRight(event)) {
event.stopPropagation();
return;
}
if (!this.isKeyPressedNumeric(event)) { if (!this.isKeyPressedNumeric(event)) {
if (event.preventDefault) event.preventDefault(); if (event.preventDefault) event.preventDefault();
} }
} }
isLeftOrRight(event) {
return [37, 39].indexOf(event.keyCode) > -1;
}
handleChange(event) { handleChange(event) {
this.setState({value: event.target.value}); this.setState({value: event.target.value});
} }
@@ -75,7 +89,6 @@ export default class MoodEditor extends Component {
return ( return (
<input ref="input" <input ref="input"
value={this.state.value} value={this.state.value}
onKeyDown={this.onKeyDown}
onChange={this.handleChange} onChange={this.handleChange}
/> />
); );