doubleclick

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