コンポーネント間で値を渡します。

Question

ToDoリストを作成しようとしました。ユーザーとクリックを追加してアイテムを追加できますが、悲惨に失敗しました。

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

あなたのコード内で提示されるようあなたは2つの「兄弟」のコンポーネント間の値を渡すことはできません。

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

しかし、あなたは、2つの方法でこれを達成することができます：

第一オプション： <Todo_list />のrender()メソッドの<TodoInput />を含む。 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') 
); 

ような何かを行うことができますReduxのを見てみましょうjsfiddle