#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()
}
}}
/>
你也可以在該函數中添加任何副作用,例如在需要時將值保存到其他位置。