React v16中type为number的input输入框值无法更新如何解决

核心根因确认 #

你猜测的输入框value固定写死为1是首要问题，此外还有几处React+Redux的常见用法错误共同导致了异常： #

1. 修正受控输入框的value绑定 #

受控组件的value必须绑定到可变的状态/属性，不能硬编码为固定值，修改输入框代码：

<input type="number" onChange={setQty} value={props.qty} />

2. 禁止直接修改ownProps #

React的props是只读属性，直接修改ownProps.qty = qty不会触发组件重渲染，修改后的值也不会同步到Redux store。你需要通过dispatch提交action来更新store中的对应状态，同时要把setQty放到mapDispatchToProps返回对象的顶层，组件才能通过props正常调用：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setQty(e) {
      const qty = parseInt(e.target.value);
      // 补充最小值判断避免出现负数/0，同时调整边界判断匹配“最大10”的需求
      if (qty >= 1 && qty <= 10) {
        // 替换为你实际的action触发逻辑
        dispatch(updateItemQty(ownProps.itemId, qty))
      }
    },
    createItem() {
      // 保留原有createItem的逻辑即可
      ...
    }
  }
}

3. 补充mapStateToProps映射状态 #

需要把Redux store中存储的qty值映射到组件props，才能在状态更新后同步到输入框：

const mapStateToProps = (state, ownProps) => {
  return {
    // 替换为你实际的store数据取值路径
    qty: state.yourItemModule.qtyList[ownProps.itemId]
  }
}

// 组件导出时通过connect绑定state和dispatch
export default connect(mapStateToProps, mapDispatchToProps)(你的组件名称)

关于e.target.value最高到2的说明 #

因为你直接修改了只读的ownProps，虽然不会触发组件重渲染，但是组件内存中的props对象已经被篡改，和渲染层的value值形成了不一致，才会出现这种不符合预期的数值限制，修复上述问题后该异常会自动消失。

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