在材质UI的文本字段中设置maxlength时未显示响应

Question

尝试设置Material-Ui的TextField的最大长度属性，但没有找到任何可以设置的属性。还尝试使用以下代码工作，但仍然无法正常工作。代码是： -

<TextField
            label="Amazon Login"
            name="login"
            type = "number"
            fullWidth
            inputProps={{
              maxLength: 10,
            }}
            onChange={this.handle_value}
            margin="normal"

          />

我在这里先向您的帮助表示感谢。

Answer 1

那么，您是否尝试使实际输入字段具有一定的宽度？如果是这样，请将className添加到TextField并以这种方式设置样式。像下面这样的东西应该工作......

  textField: {
   marginLeft: theme.spacing.unit,
   marginRight: theme.spacing.unit,
   width: '100%',
  },

  ...

          <form>
            <TextField
              fullWidth
              label="Label"
              placeholder="Begin Typing..."
              helperText="Type your notes here"
              className={classes.textField}
              margin="normal"
            />
          </form>

希望这可以帮助！

Answer 2

maxLength仅适用于文本输入。如果要将其用于数字，则即时转换用户输入。使用onInput事件。像这样：

<TextField
    label="Amazon Login"
    name="login"
    type="text"
    fullWidth
    inputProps={{
        maxLength: 10,
    }}
    onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }}
    margin="normal"
/>