Material-ui: maxLength для текстового поля ввода

Привет, @xuansehyun , ты должен просто установить атрибут maxLength в свой элемент TextField следующим образом:

<TextField
    style={styles.textfield}
    hintText="Hint Text (MultiLine)"
    multiLine={true} 
    maxLength="2" />

Сообщите мне, если это не сработает.

У меня работает, можно закрыть это думаю :)

@otroboe Согласен.

как добавить ошибку проверки, если минимальная длина меньше заданной minLength

<div class="MuiFormControl-root-100" maxlength="2" style="display: block;">
  <div class="MuiInput-root-104 SendAnnouncementFormComponent-textFieldTextRoot-90 MuiInput-formControl-105 MuiInput-multiline-111">
    <textarea class="MuiInput-input-113 SendAnnouncementFormComponent-textFieldTextInput-92 MuiInput-inputMultiline-117" id="announcementText" name="text" placeholder="Update Text" type="text" rows="10" aria-required="false" aria-invalid="false"></textarea>
  </div>
</div>

Я попробовал это, и это не сработало. MaxLength оказался на div, а не на textarea. Вот мой код, который сгенерировал указанный выше HTML.

<TextField
              InputProps={{
                id: 'announcementText',
                disableUnderline: true,
                multiline: true,
                rows: 10,
                classes: {
                  root: textFieldTextRoot,
                  input: textFieldTextInput,
                },
              }}
              maxLength="2"
              name="text"
              type="text"
              value={this.state.text}
              onChange={this.handleInputChange}
              placeholder="Update Text"
              style={{ display: 'block' }}
            />

"material-ui": "1.0.0-beta.30",

Обновление: я узнал, что могу заставить это работать, используя inputProps={{maxLength: 2}} . Оболочка важна. Не работает на InputProps

Нет документации о maxLength непосредственно на TextField .

У меня также возникают проблемы с тем, чтобы это работало с бета-версиями, и определенно кажется, что это должно быть свойство непосредственно в API компонента.

@JarLowrey ответил здесь: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

Для справки я тоже упоминаю об этом здесь. Чтобы ограничить количество вводимых длин, например, 10 в [email protected] , попробуйте этот код:

<TextField
  inputProps={{
    maxLength: 10,
  }}
/>

Обратите внимание, что InputProps и inputProps - два разных свойства TextField. Этот факт потратил впустую несколько часов моей жизни.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

Обратите внимание, что InputProps и inputProps - два разных свойства TextField. Этот факт потратил впустую несколько часов моей жизни.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

Таким же образом работает свойство минимальной длины, верно?

@kenecaswell, спасибо за сообщения, я просто потратил час, пытаясь понять, что я делаю не так.

@kenecaswell Ты только что спас жизнь 👍 Спасибо, брат !!

Если есть type = 'number', maxLength не будет работать
тип = 'число'
inputProps = {{
maxLength: 10,
}}
/>
Должен быть:
inputProps = {{
maxLength: 10,
}}
/>

Лучшее решение без каких-либо атрибутов (если они не работают).
В вашем TextField onChange() обновляйте состояние, только если длина значения равна <YOUR_MAX_LENGTH> .

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

Лучшее решение без каких-либо атрибутов (если они не работают).
В вашем TextField onChange() обновляйте состояние, только если длина значения равна <YOUR_MAX_LENGTH> .

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

OnChange никогда не является лучшим решением, поскольку он все равно будет запускать событие даже после достижения лимита, это может показаться ничем с современным процессором, но мы должны проектировать наши системы так, чтобы применять ограничения на уровне HTML, если мы можем. maxLength - это атрибут HTML и кроссбраузерно совместим даже без JavaScript.

inputProps={{ maxLength: 365 }} у меня работает.

Если вы используете formik-material-ui путь будет следующим:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

Я хочу использовать type='number' , поэтому единственное решение для меня - использовать substring в части setState .

Пример:

  const [deposit, setDeposit] = React.useState<number | null>(null);
  const disabled = deposit == null || deposit < 0 || deposit === 0;

  return (
      <TextField
        variant='outlined'
        color='primary'
        fullWidth
        type='number'
        value={deposit}
        onChange={(e) => setDeposit(Number(e.target.value.substring(0, 6)))} // This line to limit the length!
        label='Deposit'
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              <Button
                variant='text'
                disabled={disabled}
                color={'primary'}
                onClick={(_) => onSend(deposit!)}>
                <Typography color='primary'>{'Submit'}</Typography>
              </Button>
            </InputAdornment>
          )
        }}
      />