ReactJS Keydown on Input

Question

I want to handle keyPressDown (enter) on inputfield, the function kinda works but I'm not able to type anything anymore.

handleSubmit: function (e) {
    e.preventDefault();
    if (e.keyCode === 13) { console.log('hit enter'); }
    else { return false; }
  },
render: function(){
    return (
   <div className="addTask">
   <form className="questionsTask" autoComplete="off">
   <ol className="questions">
    <li>
    <input id="taskName" name="taskName" type="text" placeholder="What's your next task?" onChange={this.handleTask.name} onKeyDown={this.handleSubmit}/>
   </li> ....

Answer 1

You need to handle the onChange. Do something like:

var TextInput = React.createClass({
    getInitialState: function() {
        return {text: ''};
    },
    inputSubmit: function() {
        console.log(this.refs.userInput.getDOMNode().value);
        this.setState({text: ''});
    },
    handleChange: function(e) {
        this.setState({text: e.target.value});
    },
    handleKeyDown: function(e) {
        if (e.keyCode === 13 ) {
            return this.inputSubmit();
        }
    },
    render: function() {
        return (<input value={this.state.text} ref="userInput" onChange={this.handleChange} onKeyDown={this.handleKeyDown}/>);
    }
});

via @spicyj (http://jsfiddle.net/spicyj/HdR6E/)