Javascript 如何使数字在单击后变为可编辑？

我有一个数字，点击后应该可以编辑。我看过表单输入和其他React库，但它们都不是我想要的。下面的截图是模型

为了保持UI的一致性，我所做的只是在单击“编辑”按钮时在数字周围添加边框。（以下代码简化为仅演示功能）

constructor（）{
此.state={
editModeEnabled:false
}
}
handleEditClick（）{
这是我的国家({
editModeEnabled:！this.state.editModeEnabled
})
}
render（）{
设numberBox=null
如果（此.state.editModeEnabled）{
numberBox={
边框：“1px纯蓝色”，
}
}
$
{this.props.number}
}

我想知道是否有一种方法可以使数字在某种类型的输入字段中可编辑，而不改变数字的外观。我曾尝试将数字包装在一个

标记中，但为输入标记设计样式是一件很麻烦的事。

您可以使用

尽管如此，在这种情况下最正确的方法可能是为您的输入找出好的样式属性，因为

contenteditable

具有您最不感兴趣的HTML属性。

只需设置

的样式即可。还有其他方法可以解决这个问题，但没有一种方法比仅仅使用CSS来达到预期目的更简单。下面只是一个例子，你肯定需要为你的目标平台和设计做一些调整，但是如果你试图找到一些非CSS的解决方法，你不会遇到同样的麻烦

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
editModeEnabled:false，
}
}
handleEditClick（）{
this.setState（{editModeEnabled:！this.state.editModeEnabled}）；
}
render（）{
返回(
$
✏️
);
}
}
ReactDOM.render（，document.getElementById（'container'））
输入{
边框：1px纯蓝色；
显示：内联块；
框大小：继承；
保证金：0；
填充：0；
宽度：2米；
行高：继承；
垂直对齐：继承；
文本对齐：右对齐；
颜色：继承；
字体：继承；
背景：无；
}
输入[禁用]{
边界：0；
}
{光标：指针；文本装饰：无；}
您也可以使用Bootstrap 3、Jquery或Jquery UI。
引导是所有这些中最好的选择，因为在互联网上有多余的材料。
您可以使用“X-可编辑”。这将使您可以编辑特定字段，并在输入字段上打开弹出窗口。
链接：
如果
editModeEnabled
为真，您是否尝试在渲染函数中返回不同的JSX块？@Jordan感谢您的帮助和对这个问题的贡献。
但是设置输入标记的样式是一件痛苦的事
您的意思是什么<代码>边框：无；背景：透明：填充：0和它看起来像一个跨度（除了它的宽度）。那么，疼痛在哪里？
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>
}