反应，在doubleclick上编辑文本

双击如何使用React编辑页面的某些部分

我需要侦听元素上的doubleclick事件，并使该元素可编辑。

一种方法是使用toggle状态变量，当双击该元素时，我们显示另一个元素：

const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')
…
toggle ? (
<p
onDoubleClick={() => {
setToggle(false)
}}
>{name}</p>
) : (
<input
type=‘text’
value={project.status}
/>
)}

然后我添加了一些道具input元素。首先，我们分配一个name陈述给value支柱。

然后我们使用onChange()事件监听器来设置name当内容发生任何变化时input场地。

最后我们用onKeyDown()拦截Enter或者Escape按键事件并返回显示p元素：

<input
  type="text"
  value={name}
  onChange={(event) => {
    setName(name)
  }}
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === 'Escape') {
      setToggle(true)
      event.preventDefault()
      event.stopPropagation()
    }
  }}
/>

您也可以在该函数中添加任何副作用，例如，如有必要，可以将值保存在某个地方。

免费下载我的反应手册

反应，在doubleclick上编辑文本

双击如何使用React编辑页面的某些部分

更多反应教程：