css - Jeg trenger tilgang til input inne i InputGroup BlueprintJs React-komponenten

BluePrintJS React InputGroup-komponenten er flott og praktisk for moderne brukergrensesnitt. Men dessverre tillater ikke React-komponenten tilgang til <input>-elementet inni.

Jeg trenger å få tilgang til inndataelementet av to hovedårsaker :

  • hvis jeg har 50 InputGroups i skjemaet mitt, vil jeg ikke skrive 50 OnChange()-tilbakekallinger. Når brukeren er ferdig med alle inputene, vil jeg få alle InputGroup.value(), noe som ikke er mulig (det er mulig med vanlige input-elementer takket være HTMLInputElement.value, men InputGroup tillater ikke tilgang til intern input)

  • Når skjemaet vises, må jeg fokusere på det første feltet. InputGroup har ingen funksjon focus(), mens HTMLInputElement har en.

Kort sagt mangler det 2 funksjoner i InputGroup: GetValue() og Focus(), og jeg kan ikke se hvorfor de mangler. Enhver forslag vil bli svært verdsatt. Tusen takk.

Svar #1

Jeg fant måten å få inputen på! med :

inputRef={(input:HTMLInputElement) => {
    this.logininput=input;
}}

(så det ikke første gang).

Nå som jeg har input-objektet, kan jeg sette fokus ved "didmount", og jeg kan hente verdien med logininput.value.

Takk

Svar #2

Litt annen variant, men dette fungerer også:

inputRef:(input:HTMLInputElement | null) => {
    // your code here
    return input;
}
}}

Bare vær klar over at koden kjører når du bare gjengir komponenten, avhengig av hvordan du bruker den, for meg skjer det når jeg klikker på barnekontrollen i en velger.

I mitt tilfelle ville jeg bare endre en input som fungerer for tekstsøk på en select.

Relaterte artikler