元素的 .innerText 未显示答案

【问题标题】：.innerText of an element is not showing up元素的 .innerText 未显示
【发布时间】：2021-11-02 02:07:47
【问题描述】：

我有一个 contenteditable 的 div 并使用 useRef() 抓取 div，这是一个 reactjs 钩子。

当我尝试在 contenteditable div 中显示文本时，警报什么都不显示，但日志显示文本。

我有什么遗漏吗？

这只是我创建的一个 sn-p

export default function Input() {
  const inputRef = useRef();
    
  const showText = () => {
    console.log("text: ", inputRef.current.innerText);
    alert("text: ", inputRef.current.innerText);
  }

  return (
    <>
      <div ref={inputRef} contentEditable="true" supressContentEditableWarning={true} /> 
      <button onClick={showText}>Show text</button>
    </>   
  )
}

当我将它用作对象内部的值时，它也不起作用，例如。

const obj = {
  text: inputRef.current.innerText
}

如果有人能帮助我了解这里发生了什么，我将不胜感激！

更新只是不要使用警报来调试大声笑。

【问题讨论】：

如果将 inputRef.current.innerText 分配给一个变量，然后将其传递给 alert 和 console.log，怎么样？
innertext 是返回一个对象还是只返回一个字符串？ console.log(inputRef.current.innerText)
codepen.io/audetcameron/pen/XWgjWYo 工作笔。您确定要在组件中导入 React 和 {useRef} 吗？
@Cameron 它返回一个字符串。另外，我也在导入它们。我只是没有把它们放在这里。我只包含了一个 sn-p。
我在上面链接了一支工作笔，有帮助吗？（看控制台）

标签： html reactjs react-hooks contenteditable innertext

【解决方案1】：

有什么阻止你像这样使用 DOM 获取 innerText-

var innerText = document.getElementById('elementName').innerText

然后将值传递给您的 reactJS？

【讨论】：

有人告诉我不要使用document. 走这条路线，因为这不是真正的 reactjs 事情，因为 react 可以处理 DOM。 idk，如果这有意义的话。
DOM 更容易使用，虽然它是一个快速修复，但它可以完成工作，对 jery 索具几乎没有重大影响。

【解决方案2】：

window.alert 只接受一个参数，所以只显示第一个字符串。如果您将太多参数传递给 javascript 函数，那么多余的参数将被忽略。这与console.log 不同，console.log 是一个可变参数函数，这意味着它将接受任意数量的参数并显示所有参数。

改用alert("text: " + inputRef.current.innerText)。

【讨论】：

嗯，也许只是提醒一下，很难显示它，因为尽管如此，我应该能够抓住 innerText 对吧？我试过你的方法，我也做了alert(inputRef.current.innerText)，它是空的:(
是的。您应该能够再次访问innerText。这只是一个字符串。如果您将它作为第一个参数传递（除非 div 没有内部文本），我不知道它不应该显示在警报窗口中的任何原因。您可以打开 javascript 浏览器并运行 alert(document.body.innerText)。根据您使用的浏览器，它可能不会显示完整的字符串，但我希望会显示一些东西。反正。我不会太担心 window.alert。对于调试，请改用 console.log。对于给用户的消息，使用 react 并在页面上显示。