Puedo pasar datos pero estoy atascado aquí, ¿cómo pasar el estado del AddTodo component Todos component ? ¿Hay algún problema con la estructura de mi componente?
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> ); } }Demostración en vivo aquí http://jsbin.com/susadehacu/1/edit
Muy simple, solo necesita agregar un método en Todos para agregar un elemento a su lista. Esto luego se pasaría a su componente AddTodo como accesorio.
Todos
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)} />Añadir Todo
addHandler(){ this.props.addTodo(this.state.text); }