React.js中如何获取输入框最终值并推入数组

你当前的问题是onChange事件会在用户每一次按键时触发，导致answers数组被推入所有输入中间值。要只获取最终值，有以下几种可行方案：

方案1：使用onBlur事件替代onChange #

onBlur会在输入框失去焦点时触发，此时用户已完成输入，能直接拿到最终值。

修改Input组件的事件绑定：

const { handleChange } = useContext(FormContext);

return (
  <input
    id={`input-text${id}`}
    onBlur={(e) => handleChange(id, e)} // 替换onChange为onBlur
    style={{
      position: "absolute",
      top: `${fieldsPosX}px`,
      left: `${fieldsPosY}px`,
      background: "blue",
      border: "black",
      height: "30px",
      maxWidth: "70px",
      width: "100%",
      zIndex: "40",
      color: "#fff",
      textAlign: "center"
    }}
    maxLength={maxLength}
    type="text"
  />
);

同时修改handleChange，根据id更新对应值而非直接push（避免重复添加）：

const handleChange = (id, e) => {
  const value = e.target.value;
  // 找到对应id的项，存在则更新，不存在则添加
  const targetIndex = answers.findIndex(item => item.id === id);
  if (targetIndex !== -1) {
    answers[targetIndex].value = value;
  } else {
    answers.push({ id, value });
  }
};

方案2：给onChange添加防抖处理 #

如果需要在用户输入过程中也能实时响应，但只保留最终值，可以用防抖函数延迟执行记录操作，过滤掉中间的按键事件。

先定义防抖工具函数，再包装handleChange：

// 防抖函数：延迟delay毫秒执行，期间有新触发则重置定时器
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};

// 包装后的防抖处理函数
const debouncedHandleChange = debounce((id, e) => {
  const value = e.target.value;
  // 同样根据id更新对应值
  const targetIndex = answers.findIndex(item => item.id === id);
  if (targetIndex !== -1) {
    answers[targetIndex].value = value;
  } else {
    answers.push({ id, value });
  }
}, 300); // 300毫秒可根据需求调整

然后在Context中提供debouncedHandleChange，Input组件绑定这个函数即可。

方案3：表单提交时统一收集值 #

如果是表单场景，可以在表单的onSubmit事件中一次性收集所有输入框的最终值，彻底避免中间值问题。

比如在表单组件中：

const handleSubmit = (e) => {
  e.preventDefault();
  // 遍历所有输入框或从状态中提取最终值
  const finalAnswers = answers.map(item => item.value);
  // 处理最终值
};

return (
  <form onSubmit={handleSubmit}>
    {/* 你的Input组件们 */}
    <button type="submit">提交</button>
  </form>
);

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