1

我一直在尝试处理 redux-form 和 immutablejs，我认为我已经掌握了大部分内容。但是，我知道我至少错过了一步。并非我希望传递给表单组件的所有道具都被传递给它。例如，formKey是undefined。当我尝试使用this.props.resetForm. 该功能存在，但它似乎没有做任何事情。表单输入保持更改并且pristine为假。这是我的表单和根减速器：

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);
4

1 回答 1

0

这是一个老问题，所以我想您现在已经解决了，但是如果您仍然有问题，我建议您将 redux-form 库升级到 v6 并使用 Immutable.js 查看示例：

http://redux-form.com/6.0.2/examples/immutable/

此示例使用 redux-immutablejs 库，但它也应该与 redux-immutable 一起使用，如示例中所述。

于 2016-09-22T21:10:39.917 回答