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"
/>

在Material UI的Textfield中设置maxlength时未显示响应

2 个答案: