다른 구성 요소에 구성 요소 추가하기 React

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); 

문제는 구성 요소가 생성되고 있지 않는다는 것입니다, 나는 또한 내가 소품이 전달되지 않아요 생각 리튬 요소에 텍스트를 추가하는 단지 시도,하지만 그건 문제가 아니었다 .

여기서는 무엇을 이해하지 못하겠습니까?

Answer 1

항목 상태를 유지하고을 ListItem의 렌더링하는 데 사용

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> 
    ); 
} 
});