Add example for keypress in editors
https://github.com/ag-grid/ag-grid-react/issues/60
This commit is contained in:
@@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user