#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()來攔截EnterEscape按鍵事件,並返回顯示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()
 }
 }}
/>

你也可以在該函數中添加任何副作用,例如在需要時將值保存到其他位置。