传递组件之间的值

Question

试图制作一个待办事项列表，允许用户和点击添加添加项目，但失败惨。

https://jsfiddle.net/nc84n7px/2

我迷失了如何通过道具将数据从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 />的render()方法中包含<Todo_list /> 。 以下是您如何处理此问题的示例： https ： //jsfiddle.net/petebere/0wqLhaqu/

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

选项1代码：

var TodoInput = React.createClass({
  getInitialState() {
    return {
        userInput: ''
    };
  },

  handleChange(event) {
    this.setState({
        userInput: event.target.value
    });
  },

  handleSubmit(event) {
    event.preventDefault();
    this.props.addItem(this.state.userInput);
    this.setState({
        userInput: ''
    });
  },

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text"
                     onChange={this.handleChange}
                     value={this.state.userInput} />
        <input type="submit" />
      </form>
    );
  }
});

var Todo_list = React.createClass({
  getInitialState() {
    return {
        items: []
    };
  },

  addItem(item) {
    this.setState({
        items: this.state.items.concat(item)
    });
  },

  render() {
    const renderTodos = this.state.items.map((item, index) => {
        return <li key={index}>{item}</li>;
    });

    return (
      <div>
         <TodoInput addItem={this.addItem} />
         {renderTodos}
      </div>
    );
  }
});

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

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