Reactjs 就地编辑列表项（React）

基于简单易用的应用程序，我想了解如何修改列表项的文本。列表项包含两个div，第一个包含todo的文本，第二个包含图标（删除、编辑）。我试图有条件地呈现li文件ListItem.js中的第一个div或输入，但这对我来说不起作用

App.js

类应用程序扩展了React.Component{
状态={
项目：[]，
当前值：“”，
clearValue:false
};
submitFormHandler=事件=>{
event.preventDefault（）；
如果（this.state.currentValue==''）返回；
const updateItems=[…this.state.items]；
如果(
updateItems.filter（udtItem=>udtItem.value===this.state.currentValue）
.length==0
) {
updateItems.push({
id:uuidv4（），
值：this.state.currentValue，
已完成：false
});
}
this.setState（{items:updateItems，clearValue:true}）；
setItem（'todos'，JSON.stringify（updateItems））；
};
changeInputHandler=事件=>{
这是我的国家({
currentValue:event.target.value，
clearValue:false
});
};
deleteItem=id=>{
const updateItems=[…this.state.items].filter（item=>item.id！==id）；
this.setState（{items:updateItems}）；
setItem（'todos'，JSON.stringify（updateItems））；
};
editItem=（事件，id）=>{
event.stopPropagation（）；
//在这里做点什么
};
deleteAll=（）=>{
this.setState（{items:[]}）；
localStorage.removietem（'todos'）；
};
componentDidMount（）{
让todos=localStorage.getItem（'todos'）；
如果（待办事项）{
this.setState（{items:JSON.parse（todos）}）；
}
}
render（）{
const itemList=this.state.items.map（item=>(
));
返回(
待办事项清单
{itemList}
this.changeInputHandler（e）}
clear={this.state.clearValue}
/>
);
}
}
导出默认应用程序；

ListItem.js

类ListItem扩展组件{
状态={
交叉检查：错误，
隐藏：真的
};
toggleCrossCheck=（）=>{
const-storageItems=JSON.parse（localStorage.getItem（'todos'）；
storageItems.forEach（项目=>{
if（item.id==this.props.data.id）{
item.completed=！item.completed；
this.setState（{crossCheck:item.completed}）；
}
});
setItem（'todos'，JSON.stringify（storageItems））；
};
componentDidMount（）{
this.setState（{crossCheck:this.props.data.completed}）；
}
render（）{
让classList='图标容器'；
如果（！this.state.hidden）classList='icon container open'；
返回(
this.setState（{hidden:false}）}
onMouseLeave={（）=>this.setState（{hidden:true}）}
>
{this.props.data.value}
this.props.deleted（this.props.data.id）}
>
this.props.edited（事件，this.props.data.id）}
>

);
}
}
导出默认列表项；