子どもからの親レンダー親から

Question

エキスパート！

私はReactに問題があります。私はコールバックを介して子から親をレンダリングしようとしています。 addTask関数が親コンポーネントのレンダリングを呼び出すと仮定します。しかし、それは動作していないと私は理由を知らない。 ここにコードがあります。助けをいただければ幸いです。

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();