javascript - 在移动设备上输入时，如何让我的 React TextField 打开数字键盘？

Question

我有一个 React TextField 正在接受用户输入，它代表一个日期。当用户单击该字段时，我希望打开数字键盘而不是完整的字母表。我正在查看 React 文档 here并试图模仿他们的例子。

我的文本字段如下所示:

  <TextField
    { ...materialConfiguration }
    floatingLabelFixed={value.length > 0}
    floatingLabelText={label}
    errorText={errorText}
    onChange={this.onChange}
    onKeyUp={this.debouncedOnKeyUp}
    onBlur={this.onBlur}
    type="number"
    label="Number"
    id="standard-number"
    >
    <Cleave value={value} options={{date: true, datePattern: ['m', 'd', 'Y']}} />
  </TextField>

我从 React 示例中添加了 type label 和 id 字段，认为这就是键盘发生变化的原因，但它不起作用。我怎样才能得到这个输入来打开数字键盘？

React 示例是这样的:

<TextField
  id="standard-number"
  label="Number"
  value={this.state.age}
  onChange={this.handleChange('age')}
  type="number"
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
  }}
  margin="normal"
/>

谢谢

Answer 1

2021 年更新

  <TextField id="quantity" label="Quantity" inputProps={{ inputMode: 'numeric' }}/>

使用inputProps确实解决了这个问题。 inputProps 对象是应用于输入元素的属性。

https://material-ui.com/api/text-field/#textfield-api