Javascript 将组件更新/追加到React中的另一个组件中

我是新的反应，在学习阶段。我想做的是列出一份有截止日期的待办事项清单。 以下是我的React组件：

var TaskTitle = React.createClass({
    render: function() {
        return (
            <div className="taskTitle">
                <textarea  ref="tskTitle" onBlur={this.props.handleTitleBlur} onChange={this.props.setTaskTitle} name="tasktitle[]" id="tasktitle" value={this.props.taskTitle} className="tasktitle" ref="tskTitle"></textarea>
            </div>
        );
    }
}); 

var tasktTitle=React.createClass({
render:function（）{
返回(
);
}
}); 

日历组件

 var CalendarWithTime = React.createClass({
        componentDidMount: function() {
          this.myCalendarInput = $(ReactDOM.findDOMNode(this.refs.showCal));
          var self = this;
          this.CalendarWithTime = this.myCalendarInput.datetimepicker({
            format:'Y-m-d H:m',
            onShow:function(){
                self.props.calendarOpen(); //Updating parent state
            },
            onClose:function(){
                self.props.calendarClosed();//Updating parent state
            },
            onChangeDateTime:function(dp,input){
                self.props.dateChange(dp,input); //Updating parent state
            }
          });
        },
        render: function() {
            return (
                <div className="datetimeWrapper">
                    <div className="datetime clearfix">
                        <div ref="showCal" className="showCalendar">
                        </div>

                    </div>
                </div>
            );
        }
    });

ReactDOM.render(<PrevTaskList pollInterval="5000"/>,$('#taskWrapper').get(0));

var CalendarWithTime=React.createClass({
componentDidMount:function（）{
this.myCalendarInput=$（ReactDOM.findDOMNode（this.refs.showCal））；
var self=这个；
this.CalendarWithTime=this.myCalendarInput.datetimepicker({
格式：'Y-m-d H:m'，
onShow:function（）{
self.props.calendarOpen（）；//正在更新父状态
},
onClose:function（）{
self.props.calendarClosed（）；//正在更新父状态
},
onChangeDateTime:函数（dp，输入）{
self.props.dateChange（dp，input）；//更新父状态
}
});
},
render:function（）{
返回(
);
}
});

单Todo组件

var ToDo = React.createClass({
    handleCalendarOpen:function(){
        this.setState({ canUpdate:false });
    },
    handleCalendarClose:function(){
        this.setState({ canUpdate:true });
        this.updateTaskData();
    },
    stateUpdate:function(obj){
        for(var key in obj){
            this.state[key] = obj[key];
        }
    },
    getInitialState: function() {
        return {taskID:null,taskTitle:null,taskDueDateTime:null};
    },  
    setTaskTitle:function(event){
        this.setState({ taskTitle: event.target.value,canUpdate:false });
    },
    componentWillReceiveProps:function(newProps){
            this.setState({ 
                taskTitle: newProps.tskTitle,
                taskDueDateTime:newProps.dueDate, 
                canUpdate:true
            });
    },
    updateTaskTitle:function(event){
        this.setState({taskTitle:event.target.value,canUpdate:false});
        this.updateTaskData();
    },
    updateTaskData:function(){
        var self =this;

        setTimeout(function(){
            $.ajax({
              url: $('meta[name="baseurl"]').attr('content')+'api/save_task',
              dataType: 'json',
              method:'post',
              data:self.state,
              cache: false,
              success: function(data) {
                if(data.status){
                    self.setState({canUpdate:true});
                }                   
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.dataURL, status, err.toString());
              }.bind(this)
            });
        },500);
    },
    componentDidMount:function(){
            var seldate=this.props.tskDueDate,dueDate=null,dueTime=null,dueLabel=null;
            if(seldate){
                dueDate = moment(seldate,'YYYY-MM-DD hh:mm a').format('YYYY-MM-DD'),
                dueTime = moment(seldate,'YYYY-MM-DD hh:mm a').format('hh:mm a'),
                dueLabel = moment(seldate,'YYYY-MM-DD hh:mm a').format('MMM Do, hh:mm a');
            }
            this.setState({
                taskTitle:this.props.tskTitle,
                taskDueDateTime:this.props.tskDueDate,  
                canUpdate:true,
            });
    },
    render: function() {
        return (
            <tr className="resp-table">
                <td><TaskTitle taskTitle={this.state.taskTitle} setTaskTitle={this.setTaskTitle} canUpdate={this.state.canUpdate} handleTitleBlur={this.updateTaskTitle} onUpdate={this.stateUpdate} key={this.state.taskID +"0"+this.state.taskID} taskID={this.props.tskID} /></td>   
                <td><CalendarWithTime  calendarClosed={this.handleCalendarClose} calendarOpen={this.handleCalendarOpen} dateChange={this.handleDateChange} dueDateTime={this.state.taskDueDateTime} dueDate={this.state.taskDueDate} dueTime={this.state.taskDueTime} dueLabel={this.state.taskDueLabel} key={this.state.taskID +"2"+this.state.taskID} /></td> 
            </tr>
        );
    }
});

var ToDo=React.createClass({
handleCalendarOpen:函数（）{
this.setState（{canUpdate:false}）；
},
handleCalendarClose:函数（）{
this.setState（{canUpdate:true}）；
this.updateTaskData（）；
},
状态更新：功能（obj）{
for（obj中的var键）{
this.state[key]=obj[key]；
}
},
getInitialState:函数（）{
返回{taskID:null，taskTitle:null，taskDueDateTime:null}；
},  
setTaskTitle:函数（事件）{
this.setState（{tasktile:event.target.value，canUpdate:false}）；
},
组件将接收道具：函数（新道具）{
这个.setState（{
任务名称：newProps.tskTitle，
taskDueDateTime:newProps.dueDate，
更新：真的
});
},
updateTaskTitle:函数（事件）{
this.setState（{tasktile:event.target.value，canUpdate:false}）；
this.updateTaskData（）；
},
updateTaskData:函数（）{
var self=这个；
setTimeout（函数（）{
$.ajax({
url:$（'meta[name=“baseurl”]”）。attr（'content'）+'api/save_task'，
数据类型：“json”，
方法：'post'，
数据：自我状态，
cache:false，
成功：功能（数据）{
if（数据状态）{
setState（{canUpdate:true}）；
}                   
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.dataURL，status，err.toString（））；
}.绑定（此）
});
},500);
},
componentDidMount:function（）{
var seldate=this.props.tskDueDate，dueDate=null，dueTime=null，dueLabel=null；
如果（选择日期）{
dueDate=时刻（seldate，'yyyyy-MM-DD hh:MM a'）。格式（'YYYY-MM-DD'），
dueTime=时刻（选择日期，'YYYY-MM-DD hh:MM a'）。格式（'hh:MM a'），
duelab=力矩（seldate，'yyyyy-MM-DD hh:MM a'）。格式（'MMM Do，hh:MM a'）；
}
这是我的国家({
任务名称：this.props.tskTitle，
taskDueDateTime:this.props.tskDueDate，
更新：是的，
});
},
render:function（）{
返回(
);
}
});

//加载以前的任务（如果有）

var PrevTaskList = React.createClass({
        loadTaskList:function(){
            $.ajax({
              url: $('meta[name="baseurl"]').attr('content')+'api/get_task/',
              dataType: 'json',
              method:'post',
              data:{wsID:$('body').attr('data-wsid')},
              cache: false,
              success: function(data) {
                if(data.status){
                    this.setState({taskListData: data.taskList});
                }                   
              }.bind(this),
              error: function(xhr, status, err) {
                console.error(this.props.dataURL, status, err.toString());
              }.bind(this)
            });
        },
        componentWillMount: function() {
            this.loadTaskList();
            setInterval(this.loadTaskList,this.props.pollInterval); // to render any new task added by other users
        },
        render: function() {
            if(this.state.taskListData){
                var TaskNodes = this.state.taskListData.map(function(task){
                    return(
                        <ToDo key={task.task_id}  tskID={task.task_id} tskTitle={task.task_title} tskDueDate={task.task_due_date} />
                    );
                },this);

                return (
                        <table ref="taskTable" id="tasktable">
                            <tbody >
                                {TaskNodes}
                            </tbody>
                        </table>
                );
            }
        }
}); 

var PrevTaskList=React.createClass({
loadTaskList:函数（）{
$.ajax({
url:$（'meta[name=“baseurl”]'）.attr（'content'）+'api/get_task/'，
数据类型：“json”，
方法：'post'，
数据：{wsID:$（'body'）.attr（'data-wsID'）}，
cache:false，
成功：功能（数据）{
if（数据状态）{
this.setState（{taskListData:data.taskList}）；
}                   
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.dataURL，status，err.toString（））；
}.绑定（此）
});
},
componentWillMount:function（）{
此参数为.loadTaskList（）；
setInterval（this.loadTaskList，this.props.pollInterval）；//呈现其他用户添加的任何新任务
},
render:function（）{
if（this.state.taskListData）{
var TaskNodes=this.state.taskListData.map（函数（任务）{
返回(
);
}，这个）；
返回(
{TaskNodes}
);
}
}
}); 

渲染最终组件

 var CalendarWithTime = React.createClass({
        componentDidMount: function() {
          this.myCalendarInput = $(ReactDOM.findDOMNode(this.refs.showCal));
          var self = this;
          this.CalendarWithTime = this.myCalendarInput.datetimepicker({
            format:'Y-m-d H:m',
            onShow:function(){
                self.props.calendarOpen(); //Updating parent state
            },
            onClose:function(){
                self.props.calendarClosed();//Updating parent state
            },
            onChangeDateTime:function(dp,input){
                self.props.dateChange(dp,input); //Updating parent state
            }
          });
        },
        render: function() {
            return (
                <div className="datetimeWrapper">
                    <div className="datetime clearfix">
                        <div ref="showCal" className="showCalendar">
                        </div>

                    </div>
                </div>
            );
        }
    });

ReactDOM.render(<PrevTaskList pollInterval="5000"/>,$('#taskWrapper').get(0));

ReactDOM.render（，$（'#taskWrapper'）.get（0））；

现在，如何在文本区域（TaskTitle）组件中按enter键添加新任务？在这里，我对在哪里提供事件以及如何呈现事件感到困惑

---

空任务。我的组件建模是否正确？任何帮助都将不胜感激。。等待帮助。。希望

您希望将保存本地状态任务列表的父级函数传递给任务组件，以便在准备添加任务时调用该组件。然后，父级（具有任务状态的父级）将添加到任务列表中。最简单的方法是在文本区域旁边使用保存按钮。否则，您将不得不监听文本区域中的更改，并确定用户何时按下enter键并调用回调