点击文字元素,元素变为可编辑元素

点击文字元素变为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


原文地址:https://www.cnblogs.com/xiaochengzi/p/10370041.html