This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
I had the need to listen for a doubleclick event on an element, and make that element editable.
One way to do so is to use a toggle
state variable, and when the element is doubleclicked we show a different element:
const [toggle, setToggle] = useState(true)
const [name, setName] = useState('test')
...
toggle ? (
<p
onDoubleClick={() => {
setToggle(false)
}}
>{name}</p>
) : (
<input
type='text'
value={project.status}
/>
)}
Then I added a few props to the input
element. First, we assign a name
state to the value
prop.
Then we use the onChange()
event listener to set the value of the name
variable when there’s any change to the content of the input
field.
Finally we use onKeyDown()
to intercept the Enter
or Escape
key press event and go back to showing the p
element:
<input
type="text"
value={name}
onChange={(event) => {
setName(name)
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === 'Escape') {
setToggle(true)
event.preventDefault()
event.stopPropagation()
}
}}
/>
You can also add any side effect into that function, for example to save the value somewhere if you have to.
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
flaviocopes.com | Sciencx (2021-02-04T05:00:00+00:00) React, edit text on doubleclick. Retrieved from https://www.scien.cx/2021/02/04/react-edit-text-on-doubleclick/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.