私は redux-form と immutablejs のハンドルを取得しようとしてきましたが、ほとんどの部分がダウンしたと思います。ただし、少なくとも 1 つの手順が欠けていることはわかっています。フォーム コンポーネントに渡されると思われるすべての小道具が渡されているわけではありません。たとえば、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);