web-dev-qa-db-fra.com

Définir min / max sur TextField type = "nombre"?

J'utilise Material UI v1.0.0-beta23 avec redux-form et redux-form-material-ui. J'ai un champ qui est de type numéro et je veux définir les valeurs min et max sur la balise. J'ai essayé à la fois inputProps et min/max et aucun ne semble faire ce que je veux. J'ai regardé le code source et je ne vois pas de moyen évident de le faire. Est-ce possible, et si oui, comment?

Voici mon JSX montrant des choses que j'ai essayées.

  <Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    inputProps={{ min: 0, max: 10 }}
    min={11}
    max={20}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />

Voici à quoi ressemble le DOM:

<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">
material-uiredux-form
17
Mike Suiter

Le redux-form Field passera les accessoires au composant:

Tous les autres accessoires seront transmis à l'élément généré par l'accessoire composant.

TextField possède une propriété nommée InputProps qui peut être utilisée pour passer des accessoires au composant Input qu'il rend. Cela est également vrai si vous utilisez redux-form-material-ui. Son TextField est simplement un wrapper pour le composant material-ui.

Le composant material-ui Input a un nom de propriété inputProps qui peut être utilisé pour passer des accessoires à l'élément input qu'il rend.

Ok, alors que dois-je faire?

Vous devez passer des accessoires tout au long, de Field, à TextField, à Input, à l'élément input.

Donc, si nous définissons InputProps sur Field, il sera passé à TextField, qui le passera au composant Input. Si l'objet que nous transmettons contient un inputProps intérieur ("i" minuscule intentionnel), le composant Input le transmettra à l'élément input.

Un jeu de hot-proptato:

Fondamentalement, définissez un objet inputProps dans InputProps et appliquez-le à Field:

<Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    InputProps={{ inputProps: { min: 0, max: 10 } }}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />
  • Le champ transmet InputProps à TextField
  • TextField transmet le contenu de InputProps à Input
  • Input a transmis le contenu de inputProps à input

Il y a une mise en garde avec ceci:

implémentation actuelle de TextField définit sa propre valeur pour inputProps afin que inputClassName soit appliqué à l'élément input.

En remettant votre propre valeur de inputProps à TextField, vous écraserez la version appliquée par TextField, laissant inputClassName non défini. Si vous utilisez inputClassName, vous devrez l'inclure dans l'objet inputProps interne.

EDIT: J'ai soumis un problème et pull request pour répondre à cette mise en garde dans une prochaine version .

25
Ken Gregory