通过 return 键进行跨组件通信

Question

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

JSFiddle

编辑： improved JSFiddle（知识分子提供）

/** @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);

Answer 1

您的代码有点混乱，但快速修复是添加：

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

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

通过 return 键进行跨组件通信

Cross-component communication via return key

javascript

enter

reactjs