/

react-edit-doubleclick

＃React，雙擊編輯文本

如何在React中雙擊元素時編輯頁面的某部分

我需要監聽元素的雙擊事件並使該元素可編輯。

一種方法是使用toggle狀態變量，當元素被雙擊時顯示不同的元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input
 type="text"
 value={name}
 onChange={(event) => {
 setName(name)
 }}
 onKeyDown={(event) => {
 if (event.key === 'Enter' || event.key === 'Escape') {
 setToggle(true)
 event.preventDefault()
 event.stopPropagation()
 }
 }}
/>

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

tags: [“React”, “doubleclick”, “edit”, “input”, “useState”]