ReactJS中Material UI数值型TextField绑定state后上下箭头无法修改值问题

你使用了React受控组件模式，value属性绑定state后，所有输入行为必须通过onChange事件同步到绑定变量，否则输入框的值会被锁死，所以点击上下箭头无响应。
无需专门区分上下箭头操作，type="number"类型的输入框触发onChange时会直接返回调整后的最新值，直接取用即可。

你的需求是点击确认按钮后才同步值到原state，所以需要新增临时状态存储输入调整过程中的值，避免实时修改原state：

1. 初始化临时状态 #

在类组件constructor中新增临时状态，初始值和原bedTemp保持一致：

constructor(props) {
  super(props);
  this.state = {
    bedTemp: 30, // 原有业务状态
    tempBedTemp: 30 // 新增临时状态，存储调整过程中的值
  }
}

2. 修改TextField绑定逻辑 #

将输入框value绑定到临时状态，新增onChange事件更新临时状态：

<TextField 
  className={classes.numberClicker}
  id="bedTemperature"
  type="number"
  value={this.state.tempBedTemp}
  inputProps={{
    step: "0.1"
  }}
  onChange={(e) => {
    // 直接获取调整后的最新值，转成数字类型存储
    this.setState({
      tempBedTemp: parseFloat(e.target.value)
    })
  }}
/>

3. 确认按钮同步原状态 #

在确认按钮的点击事件中，将临时状态的值同步到原业务状态：

handleConfirm = () => {
  this.setState({
    bedTemp: this.state.tempBedTemp
  })
  // 其他确认后需要执行的业务逻辑
}

补充说明：如果不需要延迟同步、要实时更新原state，直接将value绑定回this.state.bedTemp，在onChange中直接更新bedTemp即可。

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