Home>
When a folder list is visible as shown below in a web application created with React, I would like to rename it by double-clicking on the word "Untitled". Specifically, when I double-click a character, I want to change the element of "Untitled" toso that the name can be changed.
What code should I use to implement such a feature?
CodeThe folder icon and the word "Untitled" are combined into onePaperFolder
component. This component is defined below.
import React from 'react';
import List from '@ material-ui/core/List';
import ListItem from '@ material-ui/core/ListItem';
import ListItemText from '@ material-ui/core/ListItemText';
import ListItemIcon from '@ material-ui/core/ListItemIcon';
import Folder from '@ material-ui/icons/Folder';
import Menu from '@ material-ui/core/Menu';
import MenuItem from '@ material-ui/core/MenuItem';
import Divider from '@ material-ui/core/Divider';
import {withStyles} from '@ material-ui/core/styles';
class PaperFolder extends React.Component {
constructor (props) {
super (props);
this.state = {
mouseX: null,
mouseY: null,
}
this.handleClick = this.handleClick.bind (this);
this.handleClose = this.handleClose.bind (this);
}
handleClick (event) {
event.preventDefault ();
this.setState ({
mouseX: event.clientX-2,
mouseY: event.clientY-4,
})
}
handleClose () {
this.setState ({
mouseX: null, mouseY: null
})
}
render () {
const {classes} = this.props;
return (
<List className = {classes.folder}>
<ListItem button className = {classes.folder}>
<ListItemIcon>
<Folder />
</ListItemIcon>
<ListItemText primary = {this.props.name} />
<Menu
keepMounted
open = {this.state.mouseY! == null}
anchorReference = "anchorPosition"
anchorPosition = {
this.state.mouseY! == null&&this.state.mouseX! == null
? {top: this.state.mouseY, left: this.state.mouseX}: undefined
}
>
<MenuItem>Rename</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem onClick = {this.handleClose}>Close</MenuItem>
</Menu>
</ListItem>
</List>
)
}
}
const styles = theme =>({
folder: {
paddingBottom: 0,
paddingTop: 3,
},
});
export default withStyles (styles) (PaperFolder);
Right-click now to bring up the context menu and click on Rename to try to rename it, but if possible, double-click as above I want to make it changeable.
Thanks for your consideration.
-
Answer # 1
Related articles
- javascript - i want to implement google recaptcha in react
- javascript - i want to implement a chat function using action cable
- javascript - i want to implement a start/stop function with a single button on a stopwatch
- i want to change the key name part of an associative array in a javascript function
- javascript - i want to implement the vuejs ranking function display in order of likes
- javascript - i want to implement the in-page jump function based on the information read by ajax
- i want to implement an accordion opening/closing function with javascript
- javascript - i want to implement validation of react form
- i want to implement the accordion function with javascript
- javascript - i want to get the result and implement the tweet function!
- javascript - i want to use a function with the same name as a string that is the value of a variable in an object in vuejs
- [ruby on rails] i want to implement a follow function, but the like button is not displayed in the view
- ruby - i'd like to implement a genre-specific display function in [rails], but i'm having trouble as i expected
- javascript - i'm trying to implement smooth scrolling on a wordpress fixed page
- javascript - [react] i want to eliminate syntax errors
- external javascript file cannot be read from html file can't the function documentgetelementbyid be loaded?
- javascript - how to use arrays in multiple classes with react native
- javascript - [gas] i want to select the spreadsheet id on the html side and pass it to the function
- javascript - onsubmit and onchange in react do not work
- javascript - i want to conditional branch html tag elements in react, jsx
Related questions
- javascript : How to fix conflict of two JS events
- javascript : Distance between menu items
- javascript : endless automatic scroller on js
- javascript : How to remove event.target from a specific element?
- javascript : How to make html move with js setInterval ()
- javascript : How to properly fix the bottom bar on the page?
- javascript : jQuery how to add remove event after CSS animation?
- javascript : Function not working for onclick event on link
- javascript : Clear textarea on js
- javascript : How to display part of an image on a website
I think that the problem can be solved by storing the DOM for each state in a variable and branching the DOM displayed by the value of Props or State.
For example
And when you click the button, the code becomes that the button becomes a text entry field.
(Because it is not actually moved code, don't hurt ...)