React表单重置后输入内容未清空问题求助

核心问题原因 #

你已经手动重置了state变量，但表单输入内容没同步清空，核心问题是输入框没有和对应的state变量做双向绑定——也就是输入框的value属性没有关联到你的state，导致state更新后，输入框的显示值没有同步变化。

具体修复步骤 #

1. 给所有输入框绑定对应的state值 #

确保每个输入框都通过value属性关联到对应的state，这样state更新时输入框才会同步刷新：

// 对应totalAmountIn的输入框
<input 
  type="number" 
  value={totalAmountIn} 
  onChange={handleTotalAmtInChange} 
/>

// 对应itemDescription的输入框
<input 
  type="text" 
  value={itemDescription} 
  onChange={handleItemDescription} 
/>

// 对应amountRecieved的输入框
<input 
  type="number" 
  value={amountRecieved} 
  onChange={handleAmountRecievedChange} 
/>

2. 处理handleSaveItem中未定义的表单变量 #

你代码里handleSaveItem用到的productName、sellingPriceOfTotal、quantityCount、sellingPrice这些变量，没有对应的state声明和输入框绑定逻辑。如果这些是表单输入项，需要补充以下操作：

• 先给这些变量添加state声明：

const [productName, setProductName] = useState('');
const [sellingPriceOfTotal, setSellingPriceOfTotal] = useState(0);
const [quantityCount, setQuantityCount] = useState(0);
const [sellingPrice, setSellingPrice] = useState(0);

• 给对应的输入框绑定value和onChange：

<input 
  type="text" 
  value={productName} 
  onChange={(e) => setProductName(e.target.value)} 
/>

• 在handleSaveMonyIn的重置逻辑里，补充这些state的重置：

// 原有重置逻辑后添加
setProductName('');
setSellingPriceOfTotal(0);
setQuantityCount(0);
setSellingPrice(0);

3. 可选：用表单ref快速重置（适合输入项较多的场景） #

如果表单元素很多，可以通过useRef获取表单DOM，直接调用原生的reset()方法，同时配合state重置：

import { useRef } from 'react';

// 组件内声明表单ref
const formRef = useRef(null);

// 表单标签绑定ref
<form ref={formRef} onSubmit={handleSaveMonyIn}>
  {/* 所有表单输入项 */}
</form>

// 在handleSaveMonyIn的else块里调用重置
formRef.current.reset();
// 同时重置你的state变量
setTotalAmountIn(0);
setAmountRecieved(0);
// ...其他state重置逻辑

验证效果 #

完成上述修改后，点击提交按钮时，state会被重置，输入框因为绑定了state的value属性，会同步显示初始值，从而实现表单清空的效果。

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