Eu tenho uma forma simples na minha render
função, assim:
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 ?
}
O que devo escrever no meu handleLogin: function() { ... }
para acessar Email
e Password
campos?
javascript
html
reactjs
frontend
myusuf
fonte
fonte
onSubmit
o formulário em vez de clicar no botão - dessa forma, você também manipulará o usuário que enviar o formulário pressionando enter.<form>
com a<button>
ou<input>
comtype=submit
será enviado quando o usuário pressionar Enter em qualquer um dos formulários<input type=text>
. Se você confiar emonClick
um botão, o usuário deverá clicar no botão ou focalizá-lo e pressionar Enter / barra de espaço. O usoonSubmit
ativará os dois casos de uso. Quando os formulários não suportam Enter para enviar, eles podem se sentir quebrados.Respostas:
Use os
change
eventos nas entradas para atualizar o estado do componente e acessá-lo emhandleLogin
:Violino de trabalho .
Além disso, leia os documentos, há uma seção inteira dedicada ao tratamento de formulários: Formulários
Anteriormente, você também podia usar o mixin auxiliar de ligação de dados bidirecional do React para obter a mesma coisa, mas agora está obsoleto em favor de definir o valor e alterar o manipulador (como acima):
A documentação está aqui: Auxiliares de encadernação bidirecional .
fonte
valueLink
, seu primeiro exemplo deve definir osvalue
elementos de entrada. Sem isso, os valores são "não controlados" nos termos do React.<input ... value={this.state.password}>
.Há algumas maneiras de fazer isto:
1) Obter valores da matriz de elementos de formulário por índice
2) Usando o atributo name em html
3) Usando refs
Exemplo completo
fonte
Uma abordagem alternativa é usar o
ref
atributo e referenciar os valoresthis.refs
. Aqui está um exemplo simples:Mais informações podem ser encontradas nos documentos do React: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
Por muitos dos motivos descritos em Como uso os botões de opção no React? essa abordagem nem sempre é a melhor, mas apresenta uma alternativa útil em alguns casos simples.
fonte
Uma maneira fácil de lidar com referências:
fonte
Object.keys()
seguintesmap()
itens:Object.keys(this.refs).map(field => formData[field] = this.refs[field].value)
<input type="text" ref={(input) => { this.textInput = input; }} />
Adicionando à resposta de Michael Schock:
Veja este artigo médio: Como lidar com formulários com apenas reagir
Este método obtém dados do formulário somente quando o botão Enviar é pressionado. Muito limpo IMO!
fonte
Você pode alternar o
onClick
manipulador de eventos no botão para umonSubmit
manipulador no formulário:Em seguida, você pode usar
FormData
para analisar o formulário (e construir um objeto JSON a partir de suas entradas, se desejar).fonte
Eu sugeriria a seguinte abordagem:
fonte
Se todas as suas entradas / área de texto tiverem um nome, você poderá filtrar todas as opções de event.target:
Formulário totalmente não controlado 😊 sem métodos onChange, valor, defaultValue ...
fonte
Para aqueles que não desejam usar ref e redefinir o estado com
OnChange
evento, basta usar o identificador OnSubmit simples e percorrer oFormData
objeto. Este exemplo está usando ganchos de reação:fonte
Além disso, isso também pode ser usado.
fonte
Dê suas entradas ref assim
então você pode acessá-lo em seu handleLogin como soo
fonte
Exemplo mais claro com a destruição do es6
fonte
Se você estiver usando o Redux em seu projeto, considere usar este componente de ordem superior https://github.com/erikras/redux-form .
fonte
Em muitos eventos em javascript, temos
event
um objeto que inclui o evento que aconteceu e quais são os valores, etc.É isso que usamos com os formulários no ReactJs também ...
Portanto, no seu código, você define o estado para o novo valor ... algo como isto:
Este também é o exemplo de formulário no React v.16, apenas como referência para o formulário que você criará no futuro:
fonte
Eu uso assim usando o estado React Component:
fonte
Imagem de saída anexada aqui
fonte
Isso pode ajudar os usuários do Meteor (v1.3):
fonte
Para melhorar a experiência do usuário; quando o usuário clica no botão enviar, você pode tentar fazer com que o formulário mostre primeiro uma mensagem de envio. Depois de receber uma resposta do servidor, ele pode atualizar a mensagem de acordo. Conseguimos isso no React, encadeando status. Veja codepen ou trechos abaixo:
O método a seguir faz a primeira alteração de estado:
Assim que o React mostrar a mensagem Enviando acima na tela, ele chamará o método que enviará os dados do formulário ao servidor: this.sendFormData (). Para simplificar, adicionei um setTimeout para imitar isso.
No React, o método this.setState () renderiza um componente com novas propriedades. Portanto, você também pode adicionar alguma lógica no método render () do componente de formulário que se comportará de maneira diferente, dependendo do tipo de resposta que obtemos do servidor. Por exemplo:
codepen
fonte
Se você tiver várias ocorrências de um nome de elemento, precisará usar forEach ().
html
js
Observe que os dels nesse caso são um RadioNodeList, não uma matriz e não são iteráveis. O forEach () é um método interno da classe list. Você não poderá usar um mapa () ou reduzir () aqui.
fonte
ATUALIZAÇÃO: Agora você pode usar o Formik, um pacote externo do React que facilita o manuseio de formulários!
Aqui está o link para começar
https://jaredpalmer.com/formik
fonte