奇怪的国家行为

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的状态为true时出现。然后我试图故意将其设置为假，但它仍然出现。这对我来说很不寻常。

Answer 1

你的问题是在这里：

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

你把的onClick在div，因此它被称为既当您按下编辑按钮或删除按钮。只需使用：

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