React中修改state后Reactstrap Input输入框值不更新如何解决

问题根因 #

你为Input组件使用了defaultValue属性，该属性仅在组件首次挂载渲染时生效，后续price状态更新不会同步到输入框。手动修改输入框内容后，输入框会进入非受控状态，内部值独立于外部的price state，因此调用setPrice不会触发输入框的视图更新。

解决方案 #

这里提供两种适配你现有代码的修复方案：

方案1：将输入框改为完全受控模式

把defaultValue替换为value属性，让输入框的值完全和price state绑定，同时适配react-hook-form的逻辑：

1. 先提取register返回的方法和ref：

// 从useForm的返回值中解构对应方法
const { register } = useForm();
// 单独处理price字段的注册，提取onChange和ref
const { ref: priceRef, onChange: rhfOnChange } = register("price", { required: true });

2. 修改输入框的属性，替换defaultValue为value：

<Input
  onChange={handlePriceInputChange}
  type="number"
  value={price}
  innerRef={priceRef}
/>

3. 调整handlePriceInputChange，同步更新react-hook-form的表单值：

const handlePriceInputChange = (ev) => {
  const inputVal = parseInt(ev.target.value);
  // 处理空输入的NaN情况
  const newPrice = isNaN(inputVal) ? "" : inputVal;
  setPrice(newPrice);
  // 调用react-hook-form的onChange同步表单状态
  rhfOnChange(ev);
};

修改完成后price state的变化会直接同步到输入框的展示值。

方案2：使用react-hook-form的setValue直接更新表单值

如果你不想调整输入框的受控属性，可以直接通过react-hook-form提供的setValue方法更新字段值，无需修改输入框现有配置：

1. 先从useForm的返回值中解构setValue方法：

const { register, setValue } = useForm();

2. 修改handleSelectedBox方法，新增更新表单字段的逻辑：

const handleSelectedBox = (ev) => {
  const targetPrice = parseInt(ev.target.getAttribute("data-price"));
  setSelected(ev.target.getAttribute("data-boxprice"));
  setPrice(targetPrice);
  // 直接更新price字段的表单值，会自动同步输入框的展示内容
  setValue("price", targetPrice);
};

该方案改动量更小，适合不想调整现有受控逻辑的场景。

注意事项 #

你当前的parseInt逻辑没有处理空输入的情况，空输入下parseInt会返回NaN，建议增加容错判断避免异常值。

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