React文本框onChange处理如何去除首尾空格且保留中间空格

踩坑的核心原因是格式化时机选错了：onChange是用户输入过程中每按一次键就触发的实时事件，对应的是用户未完成的临时输入状态，这个阶段直接做trim()处理，会把用户输入过程中合法的临时内容（比如刚打了开头空格准备后面输文字、两个词中间刚敲了空格还没打后面的字）直接截断，自然没法正常输入中间空格。
另外你原来的trim()写法也有问题：trim()不会修改原字符串，是返回处理后的新字符串，直接调用name.trim()不接收返回值的话，这行代码本身不会产生任何效果。

不要在实时输入阶段做首尾空格清理，把trim逻辑挪到用户结束当前输入的时机执行，既能完全保留输入过程中中间的合法空格，又能保证最终存储的值没有首尾空白字符，实现成本最低、体验最好。

方案1：输入框失焦时处理（通用场景首选） #

给输入框绑定onBlur事件，用户切走输入框焦点、结束当前项输入的时候，再对值做trim处理，输入过程中完全不干预用户操作。
对应代码调整如下：

// 列表渲染部分
return array.map((item, index) => (
  <input 
    type="text" 
    value={item.name}
    onChange={(e) => changeItemName(index, e.target.value)}
    onBlur={(e) => handleItemNameTrim(index, e.target.value)}
  />
))

// 输入过程中的更新逻辑：原样存储输入值，不做任何处理
changeItemName(index, inputValue) {
  const newList = [...array]
  newList[index].name = inputValue
  // 替换成你实际的状态更新逻辑，类组件用setState、函数组件用useState的set方法均可
  setArray(newList)
}

// 失焦时的清理逻辑：仅在用户结束输入时执行trim
handleItemNameTrim(index, inputValue) {
  const newList = [...array]
  newList[index].name = inputValue.trim()
  setArray(newList)
}

方案2：表单提交时统一处理（表单场景首选） #

如果这些输入框属于某个表单，完全不需要单独给每个输入框加失焦事件，直接在表单提交的逻辑里，遍历所有列表项，统一对name字段做trim处理后再提交/存储即可，用户全程输入无任何打断，体验最优。

// 表单提交逻辑
const handleSubmit = () => {
  // 提交前统一处理所有字段的首尾空格
  const processedList = array.map(item => ({
    ...item,
    name: item.name.trim()
  }))
  // 后续执行提交、存储逻辑
}

有些方案会教你在onChange里判断光标位置、只在光标不在首尾的时候才允许trim，这类方案逻辑复杂、边界case极多（比如用户选中多段内容替换、输入法联想输入、粘贴内容等场景很容易出bug），而且本质还是会打断用户“先打空格再补内容”的正常输入习惯，没有特殊需求不要用。

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