Material-ui: [TextField] type = Anzahl fehlender min, max, Schritt Typescript-Typen

Erstellt am 27. Nov. 2017  ·  8Kommentare  ·  Quelle: mui-org/material-ui

  • [x] Ich habe die Probleme dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist.

Erwartetes Verhalten

<TextField type="number" min="0" max="10" step="1" /> sollte mit Typescript kompiliert werden

Aktuelles Verhalten

Erhalten Sie den folgenden Typoskriptfehler für min, ähnlich für max und step: [ts] Property 'min' does not exist on type 'IntrinsicAttributes & TextFieldProps & { children?: ReactNode; }'.

Ihre Umgebung

| Tech | Version |
| -------------- | --------- |
| Material-UI | 1.0.0-beta.21 |
| Reagiere | 16.0.0 |
| Typoskript | 2.6.1 |

bug 🐛 TextField typescript

Hilfreichster Kommentar

Funktioniert das?

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

Alle 8 Kommentare

Funktioniert das?

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

Ja das funktioniert inputProps akzeptiert jedoch ein Objekt, in dem sich etwas befindet, sodass ich mich auf diese Weise effektiv vom Typsystem abmelden kann.

Ja das funktioniert inputProps akzeptiert jedoch ein Objekt, in dem sich etwas befindet, sodass ich mich auf diese Weise effektiv vom Typsystem abmelden kann.

Guter Punkt, ich habe # 9321 geöffnet, um die Eingabe von inputProps korrigieren.

inputProps soll ermöglichen, dass auf einem InputComponent alles läuft. Dies ermöglicht eine offene Integration mit externen Komponenten, für die wir leider keine Typen kennen oder haben.

Beispiel:

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

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

Die Alternative zum Vermeiden stark getippter inputProps im selben Szenario (danke @pelotom) ist also

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 reicht einen neuen Vorschlag / ein neues Problem ein, um diese API erneut zu besuchen.

@rosskevin
MaskedInput ist nicht definiert,
Maske ist nicht definiert
:(

Dies scheint eine zu komplizierte Problemumgehung zu sein

Es ist besser, diese auf TextField-Ebene zu definieren, damit die Validierung überall ohne wiederholte Logik durchgeführt werden kann. Ich würde es hassen, TextField jedes Mal erweitern zu müssen, wenn ich es für ein Zahlenfeld mit Min / Max / Schritt-Anforderungen verwenden möchte.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen