Material-ui: maxLength para cuadro de entrada de texto

Hola @xuansehyun , deberías poder establecer el atributo maxLength en tu elemento TextField así:

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

Avísame si eso no funciona.

A mí me funciona, puedes cerrar esto, creo :)

@otroboe estoy de acuerdo.

¿Cómo puedo agregar un error de validación si la longitud mínima es menor que la longitud mínima definida?

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

Intenté esto y no funcionó. MaxLength terminó en un div, no en el área de texto. Aquí está mi código que generó el HTML anterior.

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

Actualización: descubrí que puedo hacer que esto funcione usando inputProps={{maxLength: 2}} . La carcasa es importante. No funciona en InputProps

No hay documentación sobre maxLength directamente en un TextField .

También tengo problemas para que esto funcione con las versiones beta, y definitivamente parece que debería ser una propiedad directamente en la API del componente.

@JarLowrey lo respondió aquí: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

Para la referencia lo menciono aquí también. Para limitar el número de longitud de entrada 'por ejemplo, 10' en [email protected] , pruebe este código:

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

Tenga en cuenta que InputProps y inputProps son dos propiedades diferentes de TextField. Este hecho desperdició algunas horas de mi vida.

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

Tenga en cuenta que InputProps y inputProps son dos propiedades diferentes de TextField. Este hecho desperdició algunas horas de mi vida.

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

De la misma manera, la propiedad de longitud mínima también funciona, ¿verdad?

@kenecaswell gracias por las publicaciones, acabo de pasar una hora tratando de averiguar qué estaba haciendo mal.

@kenecaswell Acabas de salvar una vida 👍 ¡¡Gracias hermano !!

Si hay type = 'number', maxLength no funcionará
tipo = 'número'
inputProps = {{
maxLength: 10,
}}
/>
Debería ser:
inputProps = {{
maxLength: 10,
}}
/>

Una mejor solución sin ningún atributo (en caso de que no funcionen).
En su TextField onChange() , actualice su estado solo si la longitud del valor es igual a <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
}
}

Una mejor solución sin ningún atributo (en caso de que no funcionen).
En su TextField onChange() , actualice su estado solo si la longitud del valor es igual a <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 nunca es una solución mejor, ya que activará el evento incluso después de que se haya alcanzado el límite, puede parecer nada con la CPU moderna, pero deberíamos diseñar nuestros sistemas para hacer cumplir las restricciones a nivel HTML si podemos. maxLength es un atributo HTML y es compatible con varios navegadores incluso sin JavaScript

inputProps={{ maxLength: 365 }} me funciona.

En caso de que esté usando formik-material-ui el camino a seguir será:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

Quiero usar type='number' , por lo que la única solución para mí es usar substring en setState part.

Ejemplo:

  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>
          )
        }}
      />