反應，在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編輯頁面的某些部分

更多反應教程：