我正在使用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组件时,提示总是显示正确的文本,但它将显示为提示,并且我希望将其作为文本。在我看来,输入文本字段检测到一个更改(在更改事件上有一个侦听器或类似的东西),它立即将文本还原为原始文本,从而使其基本上不可编辑。有什么想法吗?
此组件始终显示与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>
)
}
我尚未测试,但应该可以。
@ alireza的解决方案看起来不错,只需替换
useState(event.target.value)
with
setValue(event.target.value)