Html 单击reactJS中textbox的div外部，将编辑的textbox值更改为原始传递值

请先点击查看附件中的图片。 有一个文本框，用于从状态检索原始值。现在，如果任何用户更改textbox的值并在div之外单击，则必须将textbox值替换为从状态（即2000）获得的原始值。如果用户在更改文本框中的值后单击编辑，则该值必须在状态中更新

执行此任务的任何建议。 代码示例非常感谢。

---

提前谢谢你。

我也有同样的问题。我找到了一个解决方案，在div onClick事件外部，您将状态设置为原始值，并输入div add onClick event stopPropagation，因此单击未调用的这个div onClick事件外部，然后单击edit按钮add onClick或onSubmit（如果使用表单）事件来执行编辑登录

示例代码在这里

        this.state = {
        flag: false,
        number: 0,
        oldNumber: 0
    }

    handleEditMaxAmount =()=>{
        // edit code here.
    }

    outClickHandle =()=>{
        if(this.state.flag){
          this.setState({
            number: oldNumber
          })
          this.state.flag = false
        }
    }

    inClickHandle =()=>{
        this.state.flag = true;
      }


    <div onClick={this.outClickHandle}>
        ...
        <div onClick={(e)=>{e.stopPropagation();}}>
            <input type="number" value={this.state.number} onChange={this.inClickHandle} name="number" />
            <button onClick={this.handleEditNumber}>Edit </button>     
        </div>
        ...
    </div>

this.state={
国旗：错，
编号:0，
旧号码：0
}
handleEditMaxAmount=（）=>{
//在这里编辑代码。
}
outClickHandle=（）=>{
如果（此.state.flag）{
这是我的国家({
号码：旧号码
})
this.state.flag=false
}
}
inClickHandle=（）=>{
this.state.flag=true；
}
...
{e.stopPropagation（）；}}>
编辑
...