作为道具传递状态值到另一个组件es6

Question

我能够传递数据，但我卡在这里，如何将AddTodo component的状态传递给Todos component？我的组件结构有什么问题吗？

class AddTodo extends React.Component { 
    constructor(){ 
    super(); 
    this.state = {text: ''}; 
    } 
    onTextChanged(e){ 
    this.setState({text:e.target.value}); 
    } 
    addHandler(){ 
    alert(this.state.text); // pass this to Todos?? 
    } 
    render() { 
    return(
     <div> 
     <input type="text" onChange={(e)=>this.onTextChanged(e)} /> 
     <button onClick={()=>this.addHandler()}>Add</button> 
     </div> 
    ) 
    } 
} 

class Todos extends React.Component { 
    constructor(){ 
    super(); 
    this.data = ['write book','wash clothes','jogging']; 
    } 
    render() { 
    return (  
     <div> 
     <AddTodo/> 
     <ul> 
     {this.data.map((item)=><TodoItems key={item} item={item}/>)} 
     </ul> 
     </div> 
    ); 
    } 
} 

现场演示这里http://jsbin.com/susadehacu/1/edit

Answer 1

很简单，你只需要在Todos添加一个方法将项目添加到列表中。这将作为道具传递给您的AddTodo组件。

托多斯

constructor(){ 
    super(); 
    this.data = ['write book','wash clothes','jogging']; 
} 

addTodo(todo) { 
    // new array 
    let newData = this.data.slice(); 
    newData.push(todo); 
    this.setState({data: newData}); 
} 

... 

<AddTodo addTodo={(todo) => this.addTodo(todo)} /> 

AddTodo

addHandler(){ 
    this.props.addTodo(this.state.text); 
}