关于输入的ReactJS Keydown

时间:2015-10-11 09:33:21

标签: javascript input reactjs keypress

我想在inputfield上处理keyPressDown(enter),函数有点工作,但我不能再输入任何东西。

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

1 个答案:

答案 0 :(得分:3)

您需要处理onChange。做类似的事情:

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

来自@spicyj(http://jsfiddle.net/spicyj/HdR6E/