我有一张这样的桌子:
当用户点击一个Edit
按钮时,一个<input>
应该出现在它的位置。
如果用户点击另一个Edit
按钮,这个按钮也将被替换为<input>
,并且前一个按钮<input>
应该消失并Edit
再次显示一个按钮。
简而言之,一次只能有一个字段处于编辑模式。
这是我的初始state
:
state = {
editnameEnable: false,
editemailEnable: false,
editaddressEnable: false,
edittelephone_noEnable: false,
}
这是我的edit()
方法:
edit = value => {
var address_element = ['name','address','email','telephone_no'];
address_element = address_element.filter(element => element !== value);
address_element.map( val => this.setState({[`edit${val}Enable`]: false}));
this.setState({[`edit${value}Enable`]: true}, ()=>{
console.log(this.state);
});
}
render
这是我方法中 JSX 的一部分:
<td>{
this.state[`edit${this.props.item}Enable`] ? ( <input type="text"/> ) : (
<span
className="edit"
onClick={ () => this.edit(this.props.item) }>Edit</span>
)
}</td>
问题是当我点击一个Edit
按钮时,会<input>
出现,但是当我点击另一个Edit
按钮时,前一个<input>
不会消失。