Значение передачи между компонентами

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