W mojej render
funkcji mam prosty formularz , taki jak:
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
},
handleLogin: function() {
//How to access email and password here ?
}
Co powinienem napisać, handleLogin: function() { ... }
aby uzyskać dostęp Email
i Password
pola?
javascript
html
reactjs
frontend
myusuf
źródło
źródło
onSubmit
formularz, a nie kliknięcie przycisku - w ten sposób obsłużysz również użytkownika wysyłającego formularz, naciskając klawisz enter.<form>
Z<button>
lub<input>
zetype=submit
będzie się składać, gdy użytkownik naciśnie klawisz Enter w jakikolwiek formularza użytkownika<input type=text>
. Jeśli korzystaszonClick
z jednego przycisku, użytkownik musi kliknąć przycisk lub ustawić go i nacisnąć Enter / Spacja. UżycieonSubmit
spowoduje włączenie obu przypadków użycia. Kiedy formularze nie obsługują Enter do przesyłania, mogą czuć się złamane.Odpowiedzi:
Użyj
change
zdarzeń na wejściach, aby zaktualizować stan komponentu i uzyskać do niego dostęp whandleLogin
:Skrzypce robocze .
Przeczytaj także dokumenty, jest cała sekcja poświęcona obsłudze formularzy : Formularze
Wcześniej można było również użyć dwukierunkowej miksera pomocnika wiązania danych React, aby osiągnąć to samo, ale teraz jest on przestarzały na rzecz ustawiania wartości i zmiany procedury obsługi (jak wyżej):
Dokumentacja jest tutaj: dwukierunkowe łączenie pomocników .
źródło
valueLink
, w pierwszym przykładzie należy ustawićvalue
elementy wejściowe. Bez tego wartości są „niekontrolowane” w kategoriach React.<input ... value={this.state.password}>
.Można to zrobić na kilka sposobów:
1) Uzyskaj wartości z tablicy elementów formularza według indeksu
2) Używanie atrybutu nazwy w HTML
3) Korzystanie z referencji
Pełny przykład
źródło
Alternatywnym podejściem jest użycie
ref
atrybutu i odwołanie się do wartościthis.refs
. Oto prosty przykład:Więcej informacji można znaleźć w dokumentach React: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
Z wielu powodów opisanych w Jak używać przycisków opcji w React? takie podejście nie zawsze jest najlepsze, ale w niektórych prostych przypadkach stanowi użyteczną alternatywę.
źródło
Łatwy sposób radzenia sobie z referencjami:
źródło
Object.keys()
następującego dlamap()
:Object.keys(this.refs).map(field => formData[field] = this.refs[field].value)
<input type="text" ref={(input) => { this.textInput = input; }} />
Uzupełnienie odpowiedzi Michaela Schocka:
Zobacz ten średni artykuł: Jak obsługiwać formularze za pomocą Just React
Ta metoda pobiera dane formularza tylko po naciśnięciu przycisku Prześlij. Znacznie czystsze IMO!
źródło
Możesz przełączyć
onClick
moduł obsługi zdarzeń na przycisku doonSubmit
modułu obsługi w formularzu:Następnie możesz użyć
FormData
parsowania formularza (i zbudować obiekt JSON z jego wpisów, jeśli chcesz).źródło
Sugerowałbym następujące podejście:
źródło
Jeśli wszystkie twoje dane wejściowe / tekstowe mają nazwę, możesz odfiltrować wszystkie z event.target:
Całkowicie niekontrolowana forma 😊 bez metod onChange, wartość, defaultValue ...
źródło
Dla tych, którzy nie chcą używać ref i resetować stanu ze
OnChange
zdarzeniem, możesz po prostu użyć prostego uchwytu OnSubmit i zapętlićFormData
obiekt. W tym przykładzie użyto React Hooks:źródło
Można to również wykorzystać.
źródło
Podaj swoje dane referencyjne w ten sposób
wtedy możesz uzyskać do niego dostęp w swoim uchwycie Zaloguj się jak soo
źródło
Bardziej wyraźny przykład z niszczeniem es6
źródło
Jeśli używasz Redux w swoim projekcie, możesz rozważyć użycie tego komponentu wyższego rzędu https://github.com/erikras/redux-form .
źródło
W wielu wydarzeniach w javascript mamy
event
który zawiera to, co się wydarzyło i jakie są wartości itp.Tego właśnie używamy z formularzami w ReactJs ...
Więc w kodzie ustawiłeś stan na nową wartość ... coś takiego:
Jest to również przykład formularza w React v.16, podobnie jak odniesienie do formularza, który utworzysz w przyszłości:
źródło
Używam w ten sposób, używając stanu React Component:
źródło
Załączony obraz wyjściowy
źródło
Może to pomóc użytkownikom Meteor (v1.3):
źródło
Aby poprawić wrażenia użytkownika; gdy użytkownik kliknie przycisk Prześlij, możesz spróbować uzyskać formularz, aby najpierw wyświetlić wiadomość wysyłającą. Gdy otrzymamy odpowiedź z serwera, może on odpowiednio zaktualizować wiadomość. Osiągamy to w React poprzez łączenie stanów. Zobacz codepen lub fragmenty poniżej:
Następująca metoda wprowadza pierwszą zmianę stanu:
Gdy tylko React wyświetli powyższy komunikat Wysyłanie na ekranie, wywoła metodę, która wyśle dane formularza na serwer: this.sendFormData (). Dla uproszczenia dodałem setTimeout, aby to naśladować.
W React metoda this.setState () renderuje komponent z nowymi właściwościami. Możesz więc dodać także logikę do metody render () komponentu formularza, który będzie zachowywał się inaczej w zależności od rodzaju odpowiedzi otrzymanej z serwera. Na przykład:
codepen
źródło
Jeśli masz wiele wystąpień nazwy elementu, musisz użyć forEach ().
HTML
js
Zauważ, że dels w tym przypadku to RadioNodeList, a nie tablica i nie jest iterowalna. ForEach () jest wbudowaną metodą klasy list. W tym miejscu nie będzie można używać mapy () ani zmniejszania ().
źródło
AKTUALIZACJA: Możesz teraz używać Formik zewnętrznego pakietu React, który sprawia, że obsługa formularzy jest tak prosta!
Oto link, aby zacząć
https://jaredpalmer.com/formik
źródło