반응에서 클래스의 잘못된 상태를 업데이트하는 방법은 무엇입니까?

Question

아래 코드에서 입력 텍스트를 변경하면 입력 값이 잘못 업데이트되지만 입력을 누르면 두 개의 ul 태그에서 데이터가 업데이트됩니다. 내가 뭘 잘못했는지 알아?

<script type="text/jsx"> 
/** @jsx React.DOM */ 
var todoList = React.createClass({ 
    render : function(){ 
     var createItem = function(itemText , idx){ 
     return <li key={idx+itemText} >{itemText}</li> 
     }; 
     return <ul>{this.props.itemlist.map(createItem)}</ul> 
    } 
}); 

var todoApp = React.createClass({ 
    getInitialState: function() { 
     return {items: [], text: ''}; 
    }, 
    handleChange:function(name ,e){ 
    this.state.text = e.target.value; 
    this.setState({ name : e.target.value }); 
    }, 
    handleKeyDown : function(e , idx){ 
    if(e.keyCode == 13){ 
     var nextItems = this.state.items.concat([this.state.text]); 
     this.setState({ items : nextItems , text : '' }); 
    } 
    }, 
    render :function(){ 
    var results = this.props.items; 
    return (
     <div> 
     {results.map(function(idx ,item){    
      this.state.items[idx] = item; 
      return (
      <div key={'outer'+idx}> 
       <todoList itemlist={this.state.items} /> 
       <input key={idx} onChange={this.handleChange.bind(this, item)} onKeyDown={this.handleKeyDown} onSubmit={this.handleSubmit} /> 
      </div> 
     );     
     } , this)} 
     </div> 
    ); 
    } 
}); 

React.renderComponent(<todoApp items={['item1','item2']} />, document.getElementById('example')); 
</script> 

Answer 1

'이름'을 키로 사용했지만 '텍스트'여야합니다.

handleChange:function(name ,e){ 
    this.state.text = e.target.value; 
    this.setState({ text : e.target.value }); 
    }, 

는 또한 입력 값을 전달해야 답변을

<input key={idx} onChange={this.handleChange.bind(this, item)} 
     onKeyDown={this.handleKeyDown} onSubmit={this.handleSubmit} 
     value={this.state.text} />