如何正确使用“时间”输入元素？

Question

我有一个 React 组件，它呈现以下 html：

        <input
          type="time"
          step="1"
          value={this.state.time}
          className="form-control"
          placeholder="Time"
          onChange={(ev) => {this.setState({time:ev.target.value})}
        />

这种“有点”有效，但问题是我无法在输入字段中输入两位数。假设我想输入 00:23:00。我从一个如下所示的时间字段开始：

00:00:00

接下来，我用鼠标单击中间的一对零。我按键盘上的“2”。现在它看起来像这样：

00:02:00

然而，当我输入“3”时（无论我执行的速度有多快），发生的情况是我的值如下所示：

00:03:00

虽然我希望它看起来像这样：

00:23:00

如果我删除该value属性，一切都会按预期工作，但在这种情况下，我无法在时间字段中设置起始值，这在编辑现有内容时相当烦人。

我猜想会setState触发组件的重新渲染，使其行为异常。

有想法该怎么解决这个吗？

Answer 1

我自己修好了。我正在将00:00:00字符串（或它发送回代码的任何值）转换为表示时间戳的整数。在value属性中，我将该整数转换回表示00:00:00形式。这似乎产生了我所描述的行为。如果我只是按原样存储字符串，那么一切都会按预期进行。