0
2.2K
Vistas¿Establecer min/max en TextField type="number"?
Estoy usando Material-UI v1.0.0-beta23 junto con redux-form y redux-form-material-ui . Tengo un Field que es un número de tipo y quiero establecer los valores mínimo y máximo en la etiqueta. Probé tanto inputProps como min/max y ninguno parece hacer lo que quiero. Miré el código fuente y no veo una forma obvia de hacer esto. ¿Es posible, y si es así, cómo?
Aquí está mi JSX mostrando cosas que he probado.
<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} />Así es como se ve el DOM:
<input type="number" class="MuiInput-input-346 MuiInput-inputSingleline-349 MuiInput-inputDense-347" value="-3" name="options.maxNodeSelectedCount">3 Respuestas
Responde la pregunta0
El campo de forma redux pasará accesorios al componente:
Todos los demás accesorios se pasarán al elemento generado por el componente prop.
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á utilizando redux-form-material-ui . Su TextField es simplemente un contenedor para el componente material-ui.
El componente de Input material-ui tiene una propiedad llamada inputProps que se puede usar para pasar accesorios al elemento de input que representa.
Bien, entonces, ¿qué hago?
Debe pasar los accesorios por completo, desde Field , TextField , Input , hasta el elemento de input .
Entonces, si configuramos InputProps en Field, se pasará a TextField, que lo pasará al componente Input . Si el objeto que pasamos contiene un inputProps interno ('i' minúscula intencional), el componente Input lo pasará al elemento de input .
Un juego de proptato caliente:
Básicamente, defina un objeto inputProps dentro de InputProps y aplíquelo 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 componente
Input - La entrada pasó el contenido de inputProps al elemento de
input
Hay una advertencia con esto:
La implementación actual de TextField establece su propio valor para inputProps para que inputClassName se aplique al elemento de input .
Al entregar su propio valor de inputProps a TextField, sobrescribirá la versión aplicada por TextField, dejando inputClassName sin establecer. Si está utilizando inputClassName , deberá incluirlo en el objeto inputProps interno.
EDITAR: He enviado un problema y una solicitud de extracción para abordar esta advertencia en una versión futura.
0
Simplemente usa bien tus inputprops
<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
0
Puede usar inputProps para aplicar cualquier atributo al elemento de input nativo, incluidos min y max .
<TextField type="number" inputProps={{ min: 4, max: 10 }} /> Editar: tenga en cuenta que los atributos min / max no impiden que el usuario escriba valores no válidos en TextField . Para restringir lo que el usuario puede escribir, puede validar el valor agregando el controlador onclick como se muestra a continuación:
const min = 0; const max = 10; export default function BasicTextFields() { const [value, setValue] = useState<number>(); return ( <div> <TextField type="number" inputProps={{ min, max }} value={value} onChange={(e) => { var value = parseInt(e.target.value, 10); if (value > max) value = max; if (value < min) value = min; setValue(value); }} /> </div> ); } 