ReactJS Keydown 输入

【问题标题】：ReactJS Keydown on InputReactJS Keydown 输入
【发布时间】：2016-01-08 21:23:22
【问题描述】：

我想在输入字段上处理 keyPressDown（输入），该功能有点工作，但我无法再输入任何内容。

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

【问题讨论】：

标签： javascript input reactjs keypress

【解决方案1】：

您需要处理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/)

【讨论】：