javascript - 无法使用 React JS 编辑输入文本

Question

我正在使用 React JS，并且有一个文本字段，当用户单击不同的 UI 组件时，该文本字段应该更改其内容。我还希望能够编辑该文本字段中的文本(稍后我想将该文本发送到 UI 组件，但那是另一个故事了)。到目前为止我得到了这段代码

import React, { useContext } from 'react'
import './ContextualMenu.css'
import { EditorContext } from '../../EditorBase'

const ContextualMenu = props => {
  const editorContext = useContext(EditorContext)
  const handleUpdates = (event) => {
    console.log(event.target.value)
  }
  const displayNodeAttr = () => {
    return (
      <>
        <div className="menu-title">{editorContext.selectedNode.nodeType}</div>
        <div>
          <div className="menu-item">
            <div className="menu-item-label">Name</div>
            <div className="menu-item-value">
              <input
                className="menu-item-input"
                type="text"
                value={editorContext.selectedNode.nodeAttr.name}
                onChange={handleUpdates}
              />
            </div>
          </div>
        </div>
      </>
    )
  }

  return (
    <div id="c-contextual-menu">
      {editorContext.selectedNode.nodeAttr && displayNodeAttr()}
    </div>
  )
}

export default ContextualMenu

这使得文本始终返回到用户单击组件时设置的原始文本。如果我将第 21 行 (value={editorContext.selectedNode.nodeAttr.name}) 替换为 placeholder={editorContext.selectedNode.nodeAttr.name} 则提示始终显示当用户单击 UI 组件时正确的文本，但它显示它作为提示，我希望将其作为文本。在我看来，输入文本字段检测到更改(有更改事件或类似事件的监听器)，并且它立即将文本恢复为原始文本，这使得它基本上不可编辑。有什么想法吗？

更新:在 @alireza 和 @Juviro 回答之后，我更改了代码，因为最初选定的节点为空，并且当用户选择该节点时，它变得不为空。所以代码现在看起来像这样(它只是相关部分):

const ContextualMenu = props => {
  const editorContext = useContext(EditorContext)
  const val = editorContext.selectedNode && editorContext.selectedNode.nodeAttr ? editorContext.selectedNode.nodeAttr.name : ''
  const [value, setValue] = useState(val)
  const handleUpdates = (event) => {
    setValue(event.target.value)
    console.log(event.target.value)
  }
  const displayNodeAttr = () => {
    return (
      <>
        <div className="menu-title">{editorContext.selectedNode.nodeType}</div>
        <div>
          <div className="menu-item">
            <div className="menu-item-label">Name</div>
            <div className="menu-item-value">
              <input
                className="menu-item-input"
                type="text"
                value={value}
                onChange={handleUpdates}
              />
            </div>
          </div>
        </div>
      </>
    )
  }

  return (
    <div id="c-contextual-menu">
      {editorContext.selectedNode.nodeAttr && displayNodeAttr()}
    </div>
  )
}

现在的问题是，当用户单击 UI 组件(节点)时，输入字段永远不会设置为任何值。就好像该值是在页面加载时设置的，然后在用户选择组件(节点)时永远不会更新。如果现在我使用 val 而不是 value，如下所示: value={val}<​​ 那么输入字段会正确更新，但随后我会回到无法编辑其内容的老问题。

Answer 1

您可以使用effect hook当 val 的值发生变化时调用 setValue 函数

import React, { useEffect, useState, useContext } from 'react'

const ContextualMenu = props => {
  const editorContext = useContext(EditorContext)
  const val = editorContext.selectedNode && editorContext.selectedNode.nodeAttr ? editorContext.selectedNode.nodeAttr.name : ''
  const [value, setValue] = useState(val)

  useEffect(() => {
    setValue(val)
  }, [val])

  const handleUpdates = (event) => {
    setValue(event.target.value)
    console.log(event.target.value)
  }
  const displayNodeAttr = () => {
    return (
      <>
        <div className="menu-title">{editorContext.selectedNode.nodeType}</div>
        <div>
          <div className="menu-item">
            <div className="menu-item-label">Name</div>
            <div className="menu-item-value">
              <input
                className="menu-item-input"
                type="text"
                value={value}
                onChange={handleUpdates}
              />
            </div>
          </div>
        </div>
      </>
    )
  }

  return (
    <div id="c-contextual-menu">
      {editorContext.selectedNode.nodeAttr && displayNodeAttr()}
    </div>
  )
}