React-在双击时编辑文本的方法

如何用React在双击时编辑页面的某些部分？

我需要监听一个元素的双击事件，并使该元素可编辑。

一种方法是使用一个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() 事件监听器，当input 字段的内容有任何变化时，设置name 变量的值。

最后，我们使用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()
    }
  }}
/>

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