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> ....

knowbody · Accepted Answer · 2015-10-11 16:01:11Z

6

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/)

edited Oct 11, 2015 at 16:01

answered Oct 11, 2015 at 13:49

knowbody

8,2966 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS Keydown on Input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related