Material-ui: maxLength pour la zone de saisie de texte

Hey @xuansehyun , vous devriez juste pouvoir définir l'attribut maxLength sur votre élément TextField comme ceci:

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

Faites-moi savoir si cela ne fonctionne pas.

Cela fonctionne pour moi, vous pouvez fermer cela je pense :)

@otroboe Je suis d'accord.

comment puis-je ajouter une erreur de validation si la longueur minimale est inférieure à la longueur minimale définie

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

J'ai essayé cela et cela n'a pas fonctionné. Le maxLength s'est retrouvé sur un div, pas sur la zone de texte. Voici mon code qui a généré le HTML ci-dessus.

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

Mise à jour: j'ai découvert que je pouvais faire fonctionner cela en utilisant inputProps={{maxLength: 2}} . Le boîtier est important. Cela ne fonctionne pas sur InputProps

Il n'y a pas de documentation sur maxLength directement sur un TextField .

J'ai également du mal à faire fonctionner cela avec les bêtas, et il semble que cela devrait être une propriété directement sur l'API du composant.

@JarLowrey y a répondu ici: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

Pour la référence, je le mentionne ici aussi. Pour limiter le nombre de longueur d'entrée 'par exemple 10' dans [email protected] , essayez ce code:

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

Notez que InputProps et inputProps sont deux propriétés différentes de TextField. Ce fait a gaspillé quelques heures de ma vie.

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

Notez que InputProps et inputProps sont deux propriétés différentes de TextField. Ce fait a gaspillé quelques heures de ma vie.

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

De la même manière, la propriété de longueur minimale fonctionne également correctement?

@kenecaswell merci pour les messages, je viens de passer une heure à essayer de comprendre ce que je faisais de mal.

@kenecaswell Vous venez de sauver une vie 👍 Merci mon frère !!

S'il y a type = 'number', maxLength ne fonctionnera pas
type = 'nombre'
inputProps = {{
maxLength: 10,
}}
/>
Ça devrait être:
inputProps = {{
maxLength: 10,
}}
/>

Une meilleure solution sans aucun attribut (au cas où ils ne fonctionneraient pas).
Dans votre TextField de onChange() , mettez à jour votre état uniquement si la longueur de la valeur est égale à <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
}
}

Une meilleure solution sans aucun attribut (au cas où ils ne fonctionneraient pas).
Dans votre TextField de onChange() , mettez à jour votre état uniquement si la longueur de la valeur est égale à <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 n'est jamais une meilleure solution car il déclenchera toujours l'événement même une fois la limite atteinte, cela peut sembler ne rien changer avec le processeur moderne, mais nous devrions concevoir nos systèmes pour appliquer les restrictions au niveau HTML si nous le pouvons. maxLength est un attribut HTML et compatible avec tous les navigateurs, même sans JavaScript

inputProps={{ maxLength: 365 }} fonctionne pour moi.

Si vous utilisez formik-material-ui le chemin à parcourir sera:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

Je veux utiliser type='number' , donc la seule solution pour moi est d'utiliser substring à setState part.

Exemple:

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