Currently, I am trying to find a solution for making a number editable when clicked without having to use form inputs or other React libraries that don't fit my requirements. The provided screenshots showcase the desired interface.
https://i.stack.imgur.com/Dewzx.pnghttps://i.stack.imgur.com/6GzSc.png
In order to maintain consistency in the user interface, my approach involves adding a border around the number upon clicking the edit button. Below is a simplified version of the code to illustrate the functionality:
constructor() {
this.state = {
editModeEnabled: false
}
}
handleEditClick() {
this.setState({
editModeEnabled: !this.state.editModeEnabled
})
}
render() {
let numberBox = null
if (this.state.editModeEnabled) {
numberBox = {
border: '1px solid blue',
}
}
<span style={dollarStyle}>$</span>
<div style={numberBox}>
{this.props.number}
</div>
<button onClick={this.handleEditClick.bind(this)}></button>
}
I am exploring options on how to make the number editable within an input field while maintaining its original appearance. While attempting to enclose the number with an <input> tag, I encountered challenges in styling it effectively.