Material-ui: [TextField] type = número que falta mínimo, máximo, paso Tipos de mecanografiado

¿Esto funciona?

<TextField type="number" inputProps={{ min: "0", max: "10", step: "1" }} />

Sí, eso funciona. inputProps embargo,

Sí, eso funciona. inputProps embargo,

Buen punto, abrí # 9321 para corregir la escritura de inputProps .

inputProps está destinado a permitir _cualquier cosa_ en un InputComponent . Esto permite una integración abierta con componentes externos, de los que, lamentablemente, es posible que no conozcamos o no tengamos tipos.

Ejemplo:

import * as MaskedInput from 'react-text-mask'

      <TextField
        InputProps={{
          inputComponent: MaskedInput,
        }}
        inputProps={{
          guide: false,
          mask,
          placeholderChar: '\u2000',
        }}
        type="tel"
        value={value}
      />

Entonces, la alternativa para evitar inputProps fuertemente tipados en el mismo escenario (gracias @pelotom) es

import { InputProps as MuiInputProps } from 'material-ui/Input'

      <TextField
        InputProps={{
          inputComponent: (inputProps: MuiInputProps) => (
            <MaskedInput {...inputProps} guide={false} mask={mask} placeholderChar="\u2000" />
          ),
        }}
        type="tel"
        value={value}
      />

@pelotom está presentando una nueva propuesta / problema para volver a visitar esta API.

@rosskevin
MaskedInput no está definido,
la máscara no está definida
:(

Esto parece una solución demasiado complicada

Sería mejor definirlos en el nivel de TextField, de modo que la validación se pueda realizar sin un montón de lógica repetida en todas partes. Odiaría tener que extender TextField cada vez que quiero usarlo para un campo numérico con requisitos mínimos / máximos / pasos.