Material-ui: [TextField] type = number 누락 된 최소, 최대, 단계 Typescript 유형

작동합니까?

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

네, 작동합니다. inputProps 는 어떤 것이 든 포함 된 객체를 허용하므로이 방법으로 유형 시스템을 효과적으로 옵트 아웃합니다.

네, 작동합니다. inputProps 는 어떤 것이 든 포함 된 객체를 허용하므로이 방법으로 유형 시스템을 효과적으로 옵트 아웃합니다.

좋은 지적입니다. inputProps 입력을 수정하기 위해 # 9321을 열었습니다.

inputProps 는 InputComponent 에서 _anything goes_를 허용하기위한 것입니다. 이를 통해 안타깝게도 유형을 알지 못하거나 가질 수없는 외부 구성 요소와의 개방형 통합이 가능합니다.

예:

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

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

따라서 동일한 시나리오에서 강력한 유형의 inputProps (@ pelotom에게 감사)를 피하는 대안은 다음과 같습니다.

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 은이 API를 다시 방문하기 위해 새로운 제안 / 문제를 제출하고 있습니다.

뿡뿡
MaskedInput이 정의되지 않았습니다.
마스크가 정의되지 않았습니다.
:(

이것은 지나치게 복잡한 해결 방법 인 것 같습니다.

모든 곳에서 반복되는 논리없이 유효성 검사를 수행 할 수 있도록 TextField 수준에서 정의하는 것이 좋습니다. 최소 / 최대 / 단계 요구 사항이있는 숫자 필드에 사용할 때마다 TextField를 확장해야하는 것을 싫어합니다.