无法使用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组件时，提示总是显示正确的文本，但它将显示为提示，并且我希望将其作为文本。在我看来，输入文本字段检测到一个更改（在更改事件上有一个侦听器或类似的东西），它立即将文本还原为原始文本，从而使其基本上不可编辑。有什么想法吗？

Answer 1

此组件始终显示与editorContext.selectedNode.nodeAttr.name相同的值您应该在组件中使用状态来处理其值。

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

const ContextualMenu = props => {
  const editorContext = useContext(EditorContext)
  const [value, setValue] = useState(editorContext.selectedNode.nodeAttr.name)
  const handleUpdates = (event) => {
    useState(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>
  )
}

我尚未测试，但应该可以。

Answer 2

@ alireza的解决方案看起来不错，只需替换

useState(event.target.value)

with

setValue(event.target.value)