React JS：材质 UI、文本字段

Question

所以我在 ReactJS（使用 Material UI）中编写了一个文本字段来存储数字。我希望默认值是我的状态变量之一，但我希望允许用户能够通过单击向上/向下箭头上的一个来更改值，然后在用户使用时将状态更改为该新值点击一个按钮。

这是我现在拥有的文本字段代码：

<TextField className={classes.numberClicker}
      id="bedTemperature"
      type="number"
      value = {this.state.bedTemp}
      inputProps={{
          step: "0.1"
      }}
/>

我的问题是，当我将值设置为 {this.state.bedTemp} 时，我无法使用向上/向下箭头更改该值。我知道我需要某种类型的 onChange 处理程序，但我不确定如何编写该函数来区分向上/向下箭头。

有什么想法吗？作为参考，这是文本字段的样子：

Answer 1

在句柄更改中设置您的状态，如下所示：

<TextField className={classes.numberClicker}
      id="bedTemperature"
      type="number"
      value = {this.state.bedTemp}
      onChange={(e)=> this.setState({...state, bedTemp: e.target.value})}
      inputProps={{
          step: "0.1"
      }}
/>

按钮是绝对必须的吗？在当前的模型下，它将不再需要按钮，他们只需键入数字或使用箭头，输入值就会随着状态更新