React.js中点击编辑按钮如何将可编辑div的数据提交到API

你当前代码的核心问题是：contentEditable div内的内容修改只发生在原生DOM层，不会自动同步到React的状态流里，点击按钮时自然拿不到用户编辑后的最新值，按以下逻辑实现即可：

• 用本地状态承接可编辑区域的内容，不要直接渲染全局用户数据作为可编辑div的子节点，避免触发光标跳末尾的常见bug
• 监听可编辑div的输入事件，实时把用户输入的内容同步到本地状态
• 给编辑按钮绑定提交事件，提交前做空值、重复值校验，调用API时加加载状态防止重复提交
• 接口请求成功后同步更新全局用户信息，失败时给用户对应提示

import { useState, useEffect } from 'react'
// 注：Button是你项目中已引入的组件，currentUser、isLoggedIn、全局用户更新方法从对应上下文/状态管理中获取即可
function UserNameEditor({ currentUser, isLoggedIn, updateUserInfo }) {
  // 存储编辑区的最新内容
  const [editName, setEditName] = useState('')
  // 提交加载状态，防止重复点击
  const [submitting, setSubmitting] = useState(false)

  // 初始化/全局用户名更新时，同步最新值到本地编辑状态
  useEffect(() => {
    setEditName(currentUser.user?.fullName || '')
  }, [currentUser.user?.fullName])

  // 监听可编辑区输入，实时同步内容
  const handleContentInput = (e) => {
    setEditName(e.target.innerText.trim())
  }

  // 编辑按钮提交逻辑
  const handleSubmit = async () => {
    // 基础校验
    if (!editName) {
      alert('用户名不能为空')
      return
    }
    // 内容没改直接跳过提交
    if (editName === currentUser.user?.fullName) return

    setSubmitting(true)
    try {
      // 替换成你项目实际的API请求逻辑（fetch/axios都可以）
      const res = await fetch('/api/user/update', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId: currentUser.user.id,
          fullName: editName
        })
      })
      if (!res.ok) throw new Error('提交失败，请重试')
      // 提交成功更新全局用户状态
      updateUserInfo({ fullName: editName })
      alert('用户名更新成功')
    } catch (err) {
      alert(err.message)
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <>
      <div 
        style={{ cursor: 'pointer' }} 
        contentEditable="true" 
        className="p-2"
        onInput={handleContentInput}
        suppressContentEditableWarning
      >
        {editName}
      </div>
      <Button 
        variant="success" 
        disabled={!isLoggedIn || submitting} 
        className="btn btn-custom w-100 text-center text-black"
        onClick={handleSubmit}
      >
        {submitting ? '提交中...' : 'edit'}
      </Button>
    </>
  )
}

export default UserNameEditor

• 记得给可编辑div加suppressContentEditableWarning属性，关掉React针对contentEditable元素的默认警告
• 不要直接把全局状态里的currentUser.user?.fullName作为可编辑div的子元素渲染，否则每次状态更新都会覆盖DOM内容，导致输入时光标自动跳到文本末尾

如果你不需要做输入过程中的实时校验（比如长度限制、特殊字符过滤），也可以用useRef绑定可编辑div，点击提交时直接通过ref.current.innerText获取DOM内的最新文本，这种写法代码量更精简。

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