別の反応成分から値を追加

Question

成分を作成しました。コードはここで見ることができます：http://codepen.io/anon/pen/zZmyyd

class Add extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     inItems: ["aaa", "bbb", "ccc", "ddd"] 
    } 
    this.state.items= this.state.inItems; 
    } 


    add() { 
     const currentItems = this.state.inItems, 
      newVal = this.refs.inputVal.value; 
     currentItems.push(newVal); 
     this.setState({ 
      items: currentItems, 
      value: newVal 
     }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" ref="inputVal"/> 
      <button type="button" onClick={this.add.bind(this)}>Add</button> 
      <List items= {this.state.items} /> 
     </div> 
    ) 
    } 
} 

class List extends React.Component { 
    render() { 
     return (
      <ul> 
       { 
        this.props.items.map(function(item) { 
         return <li key={item}>{item}</li> 
        }) 
       } 
      </ul> 
     ) 
    } 
} 


ReactDOM.render(
    <Add />, 
    document.getElementById('root') 
); 

私はAddnewsコンポーネントから値を追加することができますどのように？

class Addnew extends React.Component { 
    constructor() { 
     super(); 
    } 

    saveit() { 
     const currentItems = this.state.inItems, 
      newVal = this.refs.inputVal.value; 
     currentItems.push(newVal); 
     this.setState({ 
      items: currentItems, 
      value: newVal 
     }); 
    } 

    render() { 
     return <button type="button" onClick={this.saveit.bind(this)} ref="inputVal">Add Value from here</button> 
    } 
} 

Answer 1

あなたはコンポーネントを追加しますでAddNewのコンポーネントをレンダリングする必要があります。その後、

そしてが小道具にAddNewのコンポーネントとして機能を追加渡す：

render() { 
    return (
     <div> 
     <input type="text" ref="inputVal"/> 
      <button type="button" onClick={this.add.bind(this)}>Add</button> 
     <List items= {this.state.items} /> 
     <Addnew add={this.add.bind(this)} /> 
    </div> 
) 
} 

そして、AddNewのコンポーネントで：http://codepen.io/anon/pen/OpBdpV?editors=0010#0