时间戳

首页 > 解决方案 > 在 reactJS 中单击文本框的 div 外部时，将编辑的文本框值更改为原始传递的值

html - 在 reactJS 中单击文本框的 div 外部时，将编辑的文本框值更改为原始传递的值

问题描述

请单击此处首先参考所附图片。有一个文本框可以从状态中检索原始值。现在，如果任何用户更改文本框的值并在 div 之外单击，则必须将文本框值替换为从状态获取的原始值，即此处的 2000 。如果用户在更改文本框中的值后单击编辑，则必须在状态中更新该值。

执行此任务的任何建议。代码示例表示赞赏。先感谢您。

标签： htmlreactjsevents

解决方案

我遇到过同样的问题。我找到了解决方案，即在 div onClick 事件之外，您将状态设置为原始值并输入 div 添加 onclick 事件 stopPropagation 因此在未调用 onClick 事件之外单击此 div 并编辑按钮添加 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>

推荐阅读