Question

尝试制作待办事项列表，允许用户点击添加以添加项目，但失败了。

我遗失了如何通过道具将数据从TodoInput传递到Todo_list。

    var TodoInput = React.createClass({
  render() {
    return (
    <div>
     <input type="text" />
     <button onClick={this.props.addItem}>Add</button>
     </div>
    );
  }
});

var Todo_list = React.createClass({
  getInitialState(){
    return { items:[]}
  },
  addItem(items){
  this.setState(this.state.items.push(item))
  },
  render() {
    return (
    <div>
     <li>{this.state.items}</li>
     </div>
    );
  }
});

ReactDOM.render(
  <div>
  <TodoInput />
  <Todo_list />
  </div>,
  document.getElementById('container')
);

Answer 1

您无法在代码中显示的两个“兄弟”组件之间传递值：

ReactDOM.render(
  <div>
    <TodoInput />
    <Todo_list />
  </div>,
  document.getElementById('container')
);

但你可以通过两种方式实现这一目标：

第一个选项：在<TodoInput />的{{1}}方法中包含render()。以下是您如何处理此问题的示例：https://jsfiddle.net/petebere/0wqLhaqu/

第二个选项：在父组件中呈现<Todo_list />和<TodoInput />。父组件将负责维护状态并在<Todo_list />和<TodoInput />之间传递值。

选项1代码：

<Todo_list />

Answer 2

可能有清洁的方法来执行此操作，但您可以执行此类操作

var Todo_list = React.createClass({

  render() {
    return (
    <div>
       {this.props.items.map (i => <div>{i}</div>)}
     </div>
    );
  }
});

var TodoInput = React.createClass({
  getInitialState(){
    return { 
       inputValue: "",
       items: []
    }
  },

  addItem: function(){
    this.setState({ 
        items: this.state.items.concat([this.state.inputValue])
    })

  },

  onChange: function(event){
    this.setState({inputValue: event.target.value})
  },

  render() {
    return (
        <div>
           <input type="text" onChange={this.onChange}/>
           <button onClick={this.addItem}>Add</button>
           <Todo_list items={this.state.items} />
        </div>
    );
  }
});



ReactDOM.render(<TodoInput />, document.getElementById('container')
);

这是jsfiddle

在组件

2 个答案: