javascript - 从子级 react 渲染父级

Question

专家!

我在使用 React 时遇到问题。我正在尝试通过回调从子项呈现父项。假设addTask函数会调用父组件的render。但它不起作用，我不知道为什么。这是代码。如果有任何帮助，我们将不胜感激。

var tasks = [
{ type : "Personal",
task_list : [
"Visit laundty",
"Mend bike",
"Call mom"]
}];


var AddTask = React.createClass({
 getInitialState : function() {
return {
  add: false
};
},
addTask: function(e) {
    e.preventDefault();
    var task = document.getElementById('taskText').value;
    var arr = tasks[0].task_list.push(task);    
    console.log(tasks[0].task_list);
    this.setState({add: true});
    this.props.callback;
},
render: function() {
    return (
        <div 
        className='user_task'>
            <textarea 
            className = 'usr_task_text' id='taskText' >
            </textarea>
            <button 
            type = 'button'
            className='btn btn-primary usr_new_action_btn' 
            onClick = {this.addTask}> Done
            </button>
         </div>
            )
  }});


 var Tasks = React.createClass({
  render: function() {
    var lists = this.props.ddata.map(function(item, index) { 
    return (
    <li key={index}
        className='user_task'>
            {item}  
         </li>
         )
  })
  return <ul> {lists} </ul> ;
 }
});


var App = React.createClass({
   getInitialState : function() {
  return {
    update: 1
  };
},
update: function(e) {
    console.log("updated!");
 },
render: function() {
    var chpt;
    var key_ = 0;
    var p_ = new Array();
  if (tasks.length > 0) {   
    var chpt = tasks.map(function(item, index) {
    return (
    <div key = {index}>
        <div 
        className = "user_header"> 
            <span className="user_header_span" >
            {item.type}
            </span>
            </div >
            <AddTask callBack = {i => this.update}/>
            <Tasks ddata = {item.task_list} />
    </div>
    )
  })

 } else {
   chpt = <p></p>
 }
 return (
<div className="row">
    <div className = "jumbotron col-md-3 user_act">
    {chpt}
    </div>
 </div>  
 );
 }
});

ReactDOM.render(
<App />,
 document.getElementById('main_')

Answer 1

您正在引用 this.props.callback 但未调用它。添加括号来调用函数:

this.props.callback();