react.jsの特定の状態の要素を隠す

Question

私はタイトルを説明する方法がわかりません、私を許してください。しかし、私は真剣に何かにこだわっています。私はインライン編集を行うことができるtodoリストを練習しています。 特定の行のisEditの状態が存在するときに、特定の行の編集と削除を制御ボタンが隠れてしまいました。

http://jsfiddle.net/rsp61fmh/

var App = React.createClass({ 
    getInitialState(){ 
    return { 
     items:[1,2,3], 
     isEdit: null 
    } 
    }, 
    renderEditForm(){ 
    return(
    <div> 
    <input type="text" /> 
    <button onClick={this.saveHandler}>save</button> 
    </div> 
    ) 
    }, 
    ItemCtrl(index){ 

    return(
    <div className="itemCtrlWrap"> 
    <button onClick={this.editHandler.bind(this,index)}>Edit</button> 
    <button onClick={this.dltHandler.bind(this, index)}>Delete</button> 
    </div> 
    ) 

    }, 
    editHandler(i){ 
    this.setState({isEdit:i}) 
    }, 
    saveHandler(){ 
    this.setState({isEdit:null}) 
    }, 
    dltHandler(index){ 
    this.setState({items: this.state.items.filter((item,i) => i !== index)}) 
    }, 
    renderItem(){ 
    return(
     this.state.items.map((item,i)=> 
     <li key={i}> {this.state.isEdit==i ? this.renderEditForm() : item} {this.ItemCtrl(i)}</li>) 
    ) 
    }, 
    render(){ 
     return(
     <ul> 
      {this.renderItem()} 
     </ul> 
    ) 
    } 
}) 

Answer 1

このようなあなたのItemCtrl方法に条件を追加するには役立つことがあります。

ItemCtrl(index){ 

    return index !== this.state.isEdit ? (
    <div className="itemCtrlWrap"> 
     <button onClick={this.editHandler.bind(this,index)}>Edit</button> 
     <button onClick={this.dltHandler.bind(this, index)}>Delete</button> 
    </div> 
    ) : ''; 
    },