[英]hide element on certain state in react.js
I don't know how to describe the title, forgive me. 我不知道如何描述标题,请原谅。 But I'm seriously stuck on something. 但是我被严重卡住了。 I'm practicing a todo list where u can do inline editing. 我正在练习待办事项清单,您可以在其中进行内联编辑。 I'm stuck at hiding control buttons : edit and delete for a particular row when the state of isEdit for a particular row is present . 我被困在隐藏控制按钮上:当存在特定行的isEdit的状态时,编辑和删除特定行 。
http://jsfiddle.net/rsp61fmh/ 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>
)
}
})
Adding condition to your ItemCtrl
method like this may help : 像这样向您的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>
) : '';
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.