別のコンポーネントにコンポーネントを追加する反応

Question

こんにちは私は、入力にテキストを入力して「追加」ボタンを押すと、ListItemという新しいコンポーネントを追加しようとしています。

var Input = React.createClass({ 

    addListItem: function(){ 
    console.log(this.refs.input.value); 
    <ListItem>{this.refs.input.value}</ListItem> 

    }, 
     render: function(){ 
      return (
       <div> 
        <input ref="input" type="text"/> 
        <button onClick={this.addListItem}>Add</button> 
       </div> 
      ); 
     } 
    }); 

    var ListItem = React.createClass({ 

     render: function(){ 
      return (
       <li class="listItem"> 
        {this.props.value} 
       </li> 
      );   
     } 
    }); 

ReactDOM.render(<Input/>, container); 

問題は、コンポーネントが作成されていないんですが、私はまた、私は小道具が渡され取得されていないと考えli要素にいくつかのテキストを追加するだけで試してみましたが、それは問題ではありませんでした。

私はここで何を理解していませんか？

Answer 1

は、アイテムの状態を維持し、リストアイテムのレンダリングするためにそれを使用します。キャッチされない例外TypeError：

var Input = React.createClass({ 
getInitialState: function(){ 
    return { 
     items: [] 
    }; 
}, 
addListItem: function(){ 
    var items = this.state.items; 
    items.push(this.refs.input.value); 
    this.setState({ 
     items: items 
    }); 
}, 
render: function(){ 
    return (
     <div> 
      <input ref="input" type="text"/> 
      <button onClick={this.addListItem}>Add</button> 
      {this.getItems()} 
     </div> 
    ); 
}, 
getItems: function(){ 
    return this.state.items.map(function (i) { 
     return <ListItem>{i}</ListItem> 

    }); 
} 
}); 

Answer 2

var Input = React.createClass({ 
getInitialState(){ 
    return { 
     list :[] 
    } 
}, 
addListItem: function(){ 
    let array = this.state.list; 
    array.push({value:this.refs.input.value}); 
    this.setState({list: array}); 

}, 
render: function(){ 
    let list = this.state.list; 
    console.log(list) 
    let item = list&&list.map((d,i)=>{ 
      return (
       <ListItem key={i}>{d.value}</ListItem> 
      ); 
     }); 
    return (
     <div> 
      <input ref="input" type="text"/> 
      <button onClick={this.addListItem}>Add</button> 
      <ul> 
       {item} 
      </ul> 
     </div> 
    ); 
} 
}); 

var ListItem = React.createClass({ 

render: function(){ 
    return (
     <li> 
      {this.props.children} 
     </li> 
    ); 
} 
});