我的目的是在按下编辑时显示输入字段但是使用下面的代码它不起作用,我无法找出问题所在,控制台中没有错误。
http://jsbin.com/yezediloke/1/edit?js,console,output
class TodoItem extends React.Component {
constructor(){
super()
this.isEditing = false;
this.onClickEdit = this.onClickEdit.bind(this);
}
onClickEdit(){
this.setState({isEditing: !this.isEditing});
}
render(){
return(
<li>
<span>{this.props.item}</span>
{this.isEditing ? '<span><input type="text" /></span>' :''}
<button onClick={this.onClickEdit}>Edit</button>
<button>Save</button>
</li>
)
}
}
答案 0 :(得分:2)
4个问题:
1:您没有在构造函数中设置初始状态:
constructor(){
super()
this.isEditing = false;
this.onClickEdit = this.onClickEdit.bind(this);
this.state = { isEditing: false };
}
2和3:跨度不需要''
而this.isEditing
应该是this.state.isEditing
render(){
return(
<li>
<span>{this.props.item}</span>
/*Look here>>>*/ {this.state.isEditing ? <span><input type="text" /></span> :''}
<button onClick={this.onClickEdit}>Edit</button>
<button>Save</button>
</li>
)
}
4:this.isEditing
应该是onClickEdit
this.state.isEditing
onClickEdit(){
this.setState({isEditing: !this.state.isEditing});
}