点击文字元素,元素变为可编辑元素
点击文字元素变为input
方法一
增加 contentEditable 属性
<h1 className="editable-field" contentEditable={true} suppressContentEditableWarning={true} > summary </h1>
点击文字元素变为select
方法一
1. 每个FormItem对应两个元素,第一个为p文字元素,第二个为可编辑的select。
2. 点击p元素后,state中的selectedItem属性设为该元素的label属性
3. 如果selectedItem等于某个FormItem的label值,那么显示隐藏p显示select
方法二
1. 每个可编辑的元素对应两个元素,第一个为p文字元素,第二个为可编辑的select。
2. 默认情况下,select元素为隐藏状态,点击p元素,p元素的display属性设为none,select的display属性设为block
3. 点击其它元素,p元素display属性设为none