Я пытался разобраться с редукционной формой и неизменяемыми js, и я думаю, что у меня есть большинство частей. Однако я знаю, что пропустил по крайней мере один шаг. Не все реквизиты, которые я ожидал бы передать компоненту формы, передаются ему. Например, formKey
равно undefined
. Я заметил это, когда пытался использовать this.props.resetForm
. Функция есть, но ничего не делает. Входные данные формы остаются измененными, а pristine
имеет значение false. Вот моя форма и корневой редуктор:
import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
export const fields = [ 'firstName', 'lastName', 'email' ]
class ContactForm extends Component {
render() {
const {fields: {firstName, lastName, email}} = this.props;
const handleSubmit = function (e) {
e.preventDefault()
console.log('firstName', firstName.value)
}
const reset = function () {
console.log('before', this.props)
this.props.resetForm()
console.log('after', this.props)
}.bind(this)
return (
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>First Name</label>
<input type="text" className="form-control" placeholder="First Name" {...firstName}/>
</div>
<div className="form-group">
<label>Last Name</label>
<input type="text" className="form-control" placeholder="Last Name" {...lastName}/>
</div>
<div className="form-group">
<label>Email</label>
<input type="email" className="form-control" placeholder="Email" {...email}/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
<br/><br/>
<button type="button" className="btn btn-primary" onClick={reset}>Reset</button>
</form>
);
}
}
const ContactFormContainer = reduxForm({
form: 'contact',
fields,
getFormState: (state, reduxMountPoint) => state.get(reduxMountPoint).toJS()
},
function (state, ownProps) {
const contact = state.get('contacts').get(ownProps.contactId);
return {
initialValues: contact.toJS()
}
}
)(ContactForm);
export default ContactFormContainer;
.
import Immutable, {Map, fromJS} from 'immutable'
import {reducer as formReducer} from 'redux-form';
import {combineReducers} from 'redux-immutable';
import {createStore} from 'redux';
import contacts from './contacts/reducer'
const rootReducer = combineReducers({
form: (state = Immutable.fromJS({}), action) => Immutable.fromJS(formReducer(state.toJS(), action)),
contacts
});
const initialState = Map();
export default createStore(rootReducer, initialState);