React中CFormInput受控组件输入单字符即失焦问题求解

核心本质：setState触发重渲染时输入框DOM被销毁重建，和setState本身无关，是组件树引用稳定性问题，按以下优先级排查修复：

1. 优先排查组件定义位置错误 #

这是该类问题90%以上的诱因：你当前写表单的类组件，是否被定义在了其他组件的render方法/函数组件的函数体内部？
错误结构参考：

// 外层页面组件
export default function StockPage() {
  // 错误：表单组件嵌套定义在父组件内部，每次父组件重渲染都会重新生成StockForm的组件引用，React会判定为全新组件，直接销毁旧DOM重建，输入框必然失焦
  class StockForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: true,
        formStockName: '',
        formStockUnitName: '',
        formExpiry: '',
        formQuantity: '',
        components: [],
      };
    }
    changeQtyValue = async (event) => {
      console.log(event.target.value);
      this.setState({ formQuantity: event.target.value });
    }
    render() {
      return (
        <Authenticator>
            <CContainer>
                <CForm onSubmit={this.formSubmit}>
                    <CContainer>
                        <CRow className="align-items-center">
                            <CCol>
                                <CFormInput
                                    type="number"
                                    id="quantityToAdd"
                                    label={`Quantity (${this.state.formStockUnitName})`}
                                    placeholder="100"
                                    onChange={this.changeQtyValue}
                                    value={this.state.formQuantity}
                                />
                            </CCol>
                            <CCol>
                                <CFormLabel htmlFor="expiryDate">Expiry Date</CFormLabel>
                                <DatePicker className='form-control' id="expiryDate" selected={this.state.formExpiry} onChange={this.changeExpiryDate} />
                            </CCol>
                            <CCol><CButton className='float-end' type="submit" color="primary">Add</CButton></CCol>
                        </CRow>
                    </CContainer>
                </CForm>
            </CContainer>
        </Authenticator >
      )
    }
  }

  return <div><StockForm /></div>
}

修复方式：把表单类组件移到父组件外部，作为独立的顶层组件定义，保证组件引用在多次重渲染间保持稳定。

2. 排查key属性设置问题 #

你之前尝试加key无效，大概率是key值用了随渲染变化的内容（比如Math.random()、动态生成的uuid、绑定了会变的state值），这种配置反而会强制React销毁旧节点创建新节点。
修复方式：给CFormInput传入固定不变的静态key即可：

<CFormInput
  key="stock-quantity-input" // 固定字符串，不随渲染/状态变化
  type="number"
  id="quantityToAdd"
  label={`Quantity (${this.state.formStockUnitName})`}
  placeholder="100"
  onChange={this.changeQtyValue}
  value={this.state.formQuantity}
/>

不要给外层容器/表单加随机key，只需要给输入组件本身加稳定静态key。

3. 事件引用稳定性优化 #

你当前写的类箭头函数形式的事件处理本身引用是稳定的，注意不要在JSX里写内联箭头函数绑定（比如onChange={(e) => this.changeQtyValue(e)}），这类写法每次渲染都会生成新的函数引用，部分第三方UI库（你用的CoreUI、React DatePicker都属于这类）会将函数引用变化作为组件全量更新的触发条件，导致DOM重建。
另外你的changeQtyValue内部没有异步逻辑，不需要加async包装，去掉即可减少不必要的性能开销：

changeQtyValue = (event) => {
  console.log(event.target.value);
  this.setState({ formQuantity: event.target.value });
}

验证方法 #

打开浏览器开发者工具的Elements面板，选中输入框对应的DOM节点，输入字符时如果节点没有被移除重建（不会出现节点闪烁/替换的情况），说明修复完成，焦点会正常保留在输入框内。

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