React组件点击取消按钮后Input未重置为原始Prop值问题

核心问题 #

你的代码存在两个关键问题导致取消按钮无法重置输入框：

• 输入框未设为受控组件：只给输入框绑定了onChange但没有绑定value属性，输入框内容不会和组件状态同步，即使状态更新，输入框也会保持用户修改后的内容。
• 状态赋值可能存在引用复用问题：直接将myObjProp赋值给状态时，若父组件传入的myObjProp是同一个对象引用，React可能会判定状态未发生变化，跳过组件重渲染。

修复后的代码 #

// Prop结构 myObjProp
{id: '', inputText: 'Original String Val'}

const MyComponent = ({myObjProp}) => {
  const [objState, setObjState] = useState({...myObjProp})
  const {id, inputText} = objState

  const handleChange = (e) => setObjState({...objState, inputText: e.target.value})
   
  const handleCancel = () => setObjState({...myObjProp}) // 复制原始Prop对象，确保状态引用更新

  return (
    <div>
      <input onChange={handleChange} value={inputText} /> {/* 绑定value到状态，转为受控组件 */}
      <button onClick={handleCancel}>Cancel</button> {/* defaultValue是输入框属性，按钮无需配置 */}
    </div>
  )
}

关键修改说明 #

1. 输入框改为受控组件：添加value={inputText}，让输入框内容完全由组件状态控制，状态更新时输入框会自动同步显示最新值。
2. 取消按钮逻辑优化：使用{...myObjProp}复制原始Prop的属性创建新对象，避免复用同一个对象引用，确保React能检测到状态变化并触发重渲染。
3. 移除无效属性：按钮上的defaultValue是输入框专属属性，属于无效配置，直接移除即可。

修改后点击取消按钮，状态会被重置为原始Prop内容，输入框也会同步显示原始值。

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