React中如何实现点击p标签切换为input、点击input切换回p标签？

核心思路是通过状态变量控制当前渲染的节点类型，同时绑定输入内容和文本内容，保证切换前后数据一致。

具体实现步骤 #

• 定义两个状态：isEditing 布尔值控制渲染节点的切换，text 存储双向绑定的文本内容
• 点击 p 标签时将 isEditing 设为 true，渲染 input 输入框
• 点击 input 标签时将 isEditing 设为 false，渲染 p 标签，同步输入框内容到 p 标签的文本中

完整代码示例 #

import { useState } from 'react';

function EditableText() {
  // 控制编辑状态
  const [isEditing, setIsEditing] = useState(false);
  // 存储文本内容，初始值可按需求修改
  const [text, setText] = useState('点击我切换为输入框');

  return (
    <div className="editable-container">
      {isEditing ? (
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onClick={() => setIsEditing(false)}
          // 可选优化：渲染输入框时自动聚焦
          autoFocus
        />
      ) : (
        <p onClick={() => setIsEditing(true)}>
          {text}
        </p>
      )}
    </div>
  );
}

export default EditableText;

可选优化点 #

• 可以给 p 标签和 input 加相同的样式类，保证切换时布局不会出现跳变
• 如果需要支持回车确认编辑，可给 input 加 onKeyDown 事件，判断按下回车键时将 isEditing 设为 false
• 如果需要支持点击输入框外部也切回 p 标签，可以额外加全局点击事件监听，判断点击区域是否在输入框外再做状态切换

内容的提问来源于stack exchange，提问作者SaiNaveen