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

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

1 个答案: