скрыть элемент в определенном состоянии в react.js

Я не знаю, как описать название, простите меня. Но я серьезно застрял на чем-то. Я практикую список задач, где вы можете сделать встроенное редактирование. Я застрял в скрытии кнопок управления: редактировать и удалять для определенной строки, когда состояние 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>
      )
   }
})

1 ответ

  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>
       ) : '';  
       },