javascript - 组件之间传递值

Question

尝试制作一个待办事项列表，允许用户单击“添加”来添加项目，但惨败。

https://jsfiddle.net/nc84n7px/2

我不知道如何通过 Prop 将数据从 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')
);