¿Establecer mínimo / máximo en TextField type = “number”?

Solución:

El campo redux-form pasará los accesorios al componente:

Todos los demás accesorios se pasarán al elemento generado por el accesorio del componente.

TextField tiene una propiedad llamada InputProps que se puede usar para pasar accesorios al componente de entrada que representa. Esto también es cierto si está usando redux-form-material-ui. Su TextField es simplemente un contenedor para el componente material-ui.

El material-ui Input El componente tiene una propiedad llamada inputProps que se puede utilizar para pasar accesorios a la input elemento que representa.

Ok, entonces que hago?

Debes pasar los accesorios hasta el final, desde Field, para TextField, para Input, al input elemento.

Entonces, si establecemos InputProps en el campo, se pasará a TextField, que lo pasará al Input componente. Si el objeto que pasamos contiene un interior inputProps (intencional minúscula ‘i’), el componente de entrada lo pasará al input elemento.

Un juego de proptato caliente:

Básicamente, defina un inputProps objeto dentro InputProps y aplicarlo a Field:

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

• El campo pasa InputProps a TextField
• TextField pasa el contenido de InputProps al Input componente
• La entrada pasó el contenido de inputProps al input elemento

Hay una advertencia con esto:

La implementación actual de TextField establece su propio valor para inputProps de manera que la inputClassName se aplica a la input elemento.

Al entregar su propio valor de inputProps a TextField, sobrescribirá la versión aplicada por TextField, dejando inputClassName desarmado. Si estás usando inputClassName deberás incluirlo en el interior inputProps objeto.

EDITAR: Envié un problema y una solicitud de extracción para abordar esta advertencia en una versión futura.

Simplemente use su insumos bien

<TextField 
    type="number"
    InputProps={{
        inputProps: { 
            max: 100, min: 10 
        }
    }}
    label="what ever"
/>

observe las mayúsculas y minúsculas en los accesorios de entrada

crédito a Ken Gregory

---

---

Utiliza Nuestro Buscador