我正在使用 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}<
那么输入字段会正确更新,但随后我会回到无法编辑其内容的老问题。
最佳答案
您可以使用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>
)
}
关于javascript - 无法使用 React JS 编辑输入文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58859641/