通过返回键进行跨组件通信答案

【问题标题】：Cross-component communication via return key通过返回键进行跨组件通信
【发布时间】：2015-03-09 21:03:20
【问题描述】：

在我的 React.js 待办事项应用程序中，我尝试启用返回键以将我的 TextInput 组件中的项目提交到我的 ToDoList 组件。现在TextInput.inputSubmit 方法只是console.logs 输入值，但我想知道是否可以让它触发ToDoList 内部的道具（enter={that.addToDo}）。还是有更好的办法？

JSFiddle

编辑：improved JSFiddle（由 knowbody 提供）

/** @jsx React.DOM */

var todos = [{text: "walk dog"}, {text: "feed fish"}, {text: "world domination"}, {text: "integrate return key"}];

var TextInput = React.createClass({
    getInitialState: function() {
        return {text: ''};
    },
    inputSubmit: function() {
        //I think I want to trigger ToDoList's addToDo method from here?
        console.log(this.refs.inputEl.getDOMNode().value);
        this.setState({text: ''});
    },
    handleChange: function(evt) {
        this.setState({text: evt.target.value});
    },
    handleKeyDown: function(evt) {
        if (evt.keyCode === 13 ) {
            return this.inputSubmit();
        }
    },
    render: function() {
        return (
            <input value={this.state.text} ref="inputEl" onChange={this.handleChange} onKeyDown={this.handleKeyDown}/>
        )
    }
});

var SubmitButton = React.createClass({
    render: function(){
        return (
           <button onClick={this.props.click}> Add </button>
        )
    }
});


var ToDo = React.createClass({
    render: function(){
        return (
            <div>
                <button onClick={this.props.click}>X</button>
                <span> - {this.props.text}</span>
            </div>
        )
    }
});


var ToDoList = React.createClass({
    getInitialState: function (){
        return {
            todos: this.props.todos.splice(0)
        }
    },     
    deleteToDo: function(todo){
       this.state.todos.splice(this.state.todos.indexOf(todo), 1);
       this.setState({todos: this.state.todos});
    },
    addToDo: function(){
        this.state.todos.push({text: this.refs.textIn.refs.inputEl.getDOMNode().value});
        this.setState({
            todos: this.state.todos
        });
        this.refs.textIn.setState({text: ''});
    },
    render: function(){
        var that = this;
        return (
            <div>
                {this.state.todos.map(function(todo) {
                    return (
                        <ToDo text={todo.text} click={that.deleteToDo.bind(null, todo)} />
                    )
                })}

                <br/>
                <TextInput ref="textIn" enter={that.addToDo} />
                <SubmitButton click={that.addToDo} />
            </div>
        )
    }
});

React.renderComponent(<ToDoList todos={todos} />, document.body);

【问题讨论】：

标签： javascript reactjs enter

【解决方案1】：

您的代码有点乱，但可以快速解决：

this.props.enter(this.refs.inputEl.getDOMNode().value);

您的console.log() 在哪里。一旦我在我的笔记本电脑上，我会用完整的解释来编辑我的答案

【讨论】：