时间戳

首页 > 解决方案 > 无法使用反应在取消点击时获取输入中的先前值

javascript - 无法使用反应在取消点击时获取输入中的先前值

问题描述

在这里，我正在创建一个 crud 操作，其中所有功能都在工作，除了 1 个问题，当用户单击编辑时，然后 2 个按钮将启用保存和取消，用户键入一些东西，但他选择取消，但我们也得到修改后的输入旧输入

ex 在输入中你有 45 个值用户点击了编辑 --> 而不是 45 他输入了 4 并且他按下了取消即使他必须得到 45 但在按下取消之后我们得到了 4 下面是我的代码n stackvblitz

 <tbody>
                   {this.state.employeeResponse.map((response,index) => {
                       return (

                           <tr key={index}>
                                <td >{index + 1}</td>
                                <td >{response.id}</td>
                                <td >{response.employee_name}</td>
                                <td > { index !== this.state.isEditable ?<span>{response.employee_salary}</span>: <input type="text" ref={this.empSalary}  value={response.employee_salary} id="empSalary" onChange={(event)=>{
                              let data = this.state.employeeResponse;
                              data[index].employee_salary = event.target.value
                              this.setState({employeeResponse: data})
}} />}</td>                             
                                <td > {index !== this.state.isEditable?<span>{response.employee_deportment}</span>:<input type="text" ref={this.empDeportment} value={response.employee_deportment}  id="empDeportment" onChange={(event)=>{
                              let data = this.state.employeeResponse;
                              data[index].employee_deportment = event.target.value
                              this.setState({employeeResponse: data})
}} />}</td>
                                <td>
                                    {
                                      index !== this.state.isEditable ? <button  className="button-group action-button edit-button-group" onClick={()=> this.editEmployee(index)} >Edit</button>:<button  className="button-group action-button save-button-group" onClick={()=>this.saveEmployeeDetails(index)} >Save</button>
                                    }
                                    {
                                      index !== this.state.isEditable ? <button  className="button-group action-button delete-button" onClick={()=> this.deleteEmployee(response.id)} >Delete</button>:<button  className="button-group action-button cancel-button-group" onClick={this.cancelEmployeeDetails}>Cancel</button>
                                    }

                                </td>
                           </tr>                          

                       )
                   })}
                   </tbody>

https://stackblitz.com/edit/react-we1aze

标签： javascriptreactjs

解决方案

发生这种情况是因为您在 onChange 事件中保存状态。一种方法是：

  1. 删除输入的 onChange 事件

  2. 单击“编辑”按钮时将状态加载到新输入中

  3. 当他们点击“保存”按钮时保存状态

  4. 当他们单击取消按钮时忽略输入。

推荐阅读