React中用useRef获取contenteditable元素innerText alert不显示问题

1. alert无内容的原因 #

alert 方法仅支持接收1个显示参数，你传入的第二个参数inputRef.current.innerText会被直接忽略，因此只会显示固定前缀text: ，看起来就像没有获取到内容。

console.log可以正常输出是因为它支持传入任意多个参数，会依次打印所有传入的值，本身更适合调试场景，alert仅适合简单的单值提示。

修复方案：把两个值拼接成单个字符串传入，两种常用写法：

• 字符串拼接写法：alert("text: " + inputRef.current.innerText)
• 模板字符串写法：alert(`text: ${inputRef.current.innerText}`)

2. 对象属性赋值不生效的原因 #

赋值结果和对象代码的执行时机直接相关：

• 如果是在组件初始化、用户还未输入内容时就执行const obj = {text: inputRef.current.innerText}，此时contenteditable div的innerText本身就是空值，赋值自然没有内容
• 必须在用户输入完成后的回调函数（比如你写的showText点击回调）中声明并赋值该对象，才能拿到当前最新的文本内容，参考示例：

const showText = () => {
  const currentText = inputRef.current.innerText;
  console.log("text: ", currentText);
  alert(`text: ${currentText}`);
  // 此时再赋值就能拿到正确值
  const obj = {
    text: currentText
  }
  // 后续处理obj的逻辑
}

额外注意点 #

你代码中supressContentEditableWarning拼写错误，正确拼写为suppressContentEditableWarning，修复后可消去React的相关控制台警告，不过该问题不影响文本取值逻辑。

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