Encontrei o Formulário Redux pacote . Faz um trabalho muito bom!
Então, você pode usar o Redux com o React-Redux .
Primeiro você precisa criar um componente de formulário (obviamente):
import React from 'react';
import { reduxForm } from 'redux-form';
import validateContact from '../utils/validateContact';
class ContactForm extends React.Component {
render() {
const { fields: {name, address, phone}, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" {...name}/>
{name.error && name.touched && <div>{name.error}</div>}
<label>Address</label>
<input type="text" {...address} />
{address.error && address.touched && <div>{address.error}</div>}
<label>Phone</label>
<input type="text" {...phone}/>
{phone.error && phone.touched && <div>{phone.error}</div>}
<button onClick={handleSubmit}>Submit</button>
</form>
);
}
}
ContactForm = reduxForm({
form: 'contact', // the name of your form and the key to
// where your form's state will be mounted
fields: ['name', 'address', 'phone'], // a list of all your fields in your form
validate: validateContact // a synchronous validation function
})(ContactForm);
export default ContactForm;
Depois disso, você conecta o componente que lida com o formulário:
import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import ContactForm from './ContactForm.react';
class App extends React.Component {
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contact', {})); // clear form
}
render() {
return (
<div id="app">
<h1>App</h1>
<ContactForm onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
export default connect()(App);
E adicione o redutor de forma redux em seus redutores combinados:
import { combineReducers } from 'redux';
import { appReducer } from './app-reducers';
import { reducer as formReducer } from 'redux-form';
let reducers = combineReducers({
appReducer, form: formReducer // this is the form reducer
});
export default reducers;
E o módulo validador é assim:
export default function validateContact(data, props) {
const errors = {};
if(!data.name) {
errors.name = 'Required';
}
if(data.address && data.address.length > 50) {
errors.address = 'Must be fewer than 50 characters';
}
if(!data.phone) {
errors.phone = 'Required';
} else if(!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
errors.phone = 'Phone must match the form "999-999-9999"'
}
return errors;
}
Após o preenchimento do formulário, quando você desejar preencher todos os campos com alguns valores, poderá usar a initialize
função:
componentWillMount() {
this.props.dispatch(initialize('contact', {
name: 'test'
}, ['name', 'address', 'phone']));
}
Outra maneira de preencher os formulários é definir os valores iniciais.
ContactForm = reduxForm({
form: 'contact', // the name of your form and the key to
fields: ['name', 'address', 'phone'], // a list of all your fields in your form
validate: validateContact // a synchronous validation function
}, state => ({
initialValues: {
name: state.user.name,
address: state.user.address,
phone: state.user.phone,
},
}))(ContactForm);
Se você tiver outra maneira de lidar com isso, deixe uma mensagem! Obrigado.
redux-forms
? Eu estou querendo saber como que as escalas clichê comparado a reagir formasredux-form
é péssimo em todas as versões do IE, incluindo o Edge. Se você precisar apoiá-lo, procure outro lugar.UPDATE: é 2018 e só vou usar o Formik (ou bibliotecas semelhantes ao Formik)
Há também a forma react-redux ( passo a passo ), que parece trocar parte da forma redux javascript (& boilerplate) com a declaração de marcação. Parece bom, mas ainda não o usei.
Um recortar e colar do leia-me:
./components/my-form-component.js
Editar: Comparação
Os documentos react-redux-form fornecem uma comparação vs redux-form:
https://davidkpiano.github.io/react-redux-form/docs/guides/compare-redux-form.html
fonte
Para aqueles que não se importam com uma enorme biblioteca para lidar com questões relacionadas a formulários, eu recomendaria redux-form-utils .
Ele pode gerar valor e alterar manipuladores para seus controles de formulário, gerar redutores do formulário, criadores de ações úteis para limpar certos (ou todos) campos, etc.
Tudo que você precisa fazer é montá-los em seu código.
Ao usar
redux-form-utils
, você acaba com a manipulação de formulários da seguinte maneira:No entanto, essa biblioteca apenas resolve problemas
C
eU
, paraR
eD
, talvez umTable
componente mais integrado seja o antipate.fonte
Apenas mais uma coisa para quem deseja criar um componente de formulário totalmente controlado sem usar uma biblioteca de grandes dimensões.
ReduxFormHelper - uma pequena classe ES6, com menos de 100 linhas:
Não faz todo o trabalho para você. No entanto, facilita a criação, validação e manipulação de um componente de formulário controlado. Você pode apenas copiar e colar o código acima em seu projeto ou incluir a respectiva biblioteca -
redux-form-helper
(plug!).Como usar
O primeiro passo é adicionar dados específicos ao estado Redux, o que representará o estado do nosso formulário. Esses dados incluirão os valores atuais do campo, bem como o conjunto de sinalizadores de erro para cada campo no formulário.
O estado do formulário pode ser adicionado a um redutor existente ou definido em um redutor separado.
Além disso, é necessário definir uma ação específica iniciando a atualização do estado do formulário, bem como o respectivo criador da ação.
Exemplo de ação :
Exemplo de redutor :
A segunda e última etapa é criar um componente de contêiner para nosso formulário e conectá-lo à respectiva parte do estado e ações do Redux.
Também precisamos definir um modelo de formulário especificando a validação dos campos do formulário. Agora, instanciamos o
ReduxFormHelper
objeto como membro do componente e passamos para lá nosso modelo de formulário e uma atualização de despacho de retorno de chamada do estado do formulário.Em seguida, no
render()
método do componente , precisamos vincularonChange
osonSubmit
eventos de cada campo e do formulário aos métodosprocessField()
eprocessForm()
respectivamente, além de exibir blocos de erro para cada campo, dependendo dos sinalizadores de erro do formulário no estado.O exemplo abaixo usa CSS da estrutura do Twitter Bootstrap.
Exemplo de componente de contêiner :
Demo
fonte