就我而言，react.js 中的奇怪狀態行為

Question

http://jsfiddle.net/1erw4fba/5/

var App = React.createClass({
   getInitialState(){
   return {
     items:[1,2,3],
     isEditing:false
   }
   },
   dlt_item(key){
   var newItems = this.state.items.filter((item,i)=> i !== key)
   this.setState({items:newItems,isEditing:false})
   },
   edit_handler(){
   this.setState({isEditing:true})
   },
   isEditing_html(){
    return(
     <div>
     <input type="text" />
     <button>Save</button>
     </div>
     )
   },
   renderItem(){

   return(

      this.state.items.map(function(item,i) {

       var temp = null;
       if(this.state.isEditing){
   temp = this.isEditing_html()
   }else{
   temp = <div onClick={this.edit_handler}><button>Edit</button>
   <button onClick={this.dlt_item.bind(this,i)}>Delete</button></div>
   }
      return (<li key={i}>{item}
   &nbsp;
   {temp}
   </li>

   )
   }.bind(this)
   )
   )
   },
   render(){
      return(
      <ul>
        {this.renderItem()}
      </ul>
      )
   }
})

當我點擊刪除按鈕時，為什么會出現編輯輸入文本？ 假設它只有在 isEditing 的狀態為真時才會出現。 然后我嘗試故意將其設置為 false，但它仍然出現。 這對我來說很不尋常。

Answer 1

你的問題在這里：

temp = <div onClick={this.edit_handler}><button>Edit</button>
<button onClick={this.dlt_item.bind(this,i)}>Delete</button></div>

您將 onClick 放在 div 中，因此當您按下 Edit 按鈕或 Delete 按鈕時，它都會被調用。 只需使用：

 temp = <div><button onClick={this.edit_handler}>Edit</button>
 <button onClick={this.dlt_item.bind(this,i)}>Delete</button></div>