ReactJS中如何重置input组件的defaultValue？附实际场景代码

React 中非受控组件的 defaultValue 属性仅在组件首次挂载渲染时生效，后续状态更新修改 defaultValue 不会触发 input 值变更，这就是你无法直接重置的核心原因。

步骤1：拓展state存储编辑值与原始值 #

在你的state中新增两个字段，分别存储当前编辑的表单值，以及编辑前的原始值用于重置：

state = {
  // 保留原有其他状态（isEditing、idEditing等）
  editFormValues: {},
  originalEditValues: {}
}

步骤2：进入编辑态时初始化值 #

在触发编辑操作的函数中，把当前要编辑的对象原始值存入state：

// 示例为你的编辑触发函数，可根据你原有逻辑调整
startEdit = (p) => {
  const originalVal = {
    id: p.id,
    name: p.name,
    phone: p.phone // 对应你要重置的[1, Pacific Rim, 0969278743]三个字段
  }
  this.setState({
    isEditing: true,
    idEditing: p.id,
    editFormValues: {...originalVal},
    originalEditValues: originalVal
  })
}

步骤3：修改input为受控绑定 #

把input的defaultValue替换为value，绑定state中的编辑值：

<input 
  type="text" 
  name={name} 
  className = {"form-control " + ((placeholder !== "Id") ? "editForm":"editId" ) } 
  placeholder={placeholder} 
  value={this.state.editFormValues[name]}
  onChange = {(event) => this.realtimeUser(event)}
/>

步骤4：调整onChange与重置函数逻辑 #

// 输入时同步更新state
realtimeUser = (e) => {
  this.setState(prev => ({
    editFormValues: {
      ...prev.editFormValues,
      [e.target.name]: e.target.value
    }
  }))
}

// 重置函数直接回滚为原始值
resetDefaultValue = (e) => {
  e.preventDefault()
  this.setState(prev => ({
    editFormValues: {...prev.originalEditValues}
  }))
}

如果你不想改动现有非受控组件的逻辑，可以通过key属性强制组件重挂载实现重置：

步骤1：state新增重置计数字段 #

state = {
  // 保留原有其他状态
  resetCount: 0
}

步骤2：给form绑定key属性 #

<form key={`edit-form-${this.state.idEditing}-${this.state.resetCount}`}>
  {/* 保留你原有input、button代码不变 */}
</form>

步骤3：重置函数更新计数触发重渲染 #

resetDefaultValue = (e) => {
  e.preventDefault()
  this.setState(prev => ({
    resetCount: prev.resetCount + 1
  }))
}

组件重挂载后会自动读取最新的defaultValue渲染，实现重置效果。

内容的提问来源于stack exchange，提问作者dangthaii