Question

所以我正在尝试创建一个包含用户列表的容器，以及当用户单击“编辑”时需要预先填充的Dialog模式。我已经想出如何在reduxForm().connect内部预填充这些表单，但是我似乎无法从状态填充表单。有人能指出我正确的方向吗？我很亲密，但我觉得我的连接器中缺少一些东西。

这是我的代码（包括尝试从状态加载initialValues）

import React from 'react';
import { connect } from 'react-redux';
import selectManageUsersPage from './selectors';
import styles from './styles.css';
import { TextField } from 'redux-form-material-ui';
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form/immutable';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import { createStructuredSelector } from 'reselect';
import { fetchUsers, createUser } from './actions';
import Dialog from 'material-ui/Dialog';

export class ManageUsersPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props) {
    super(props);

    this.state = {
      userModalOpen: false,
      isEditingUser: false,
      modalTitle: 'Add a user',
      user: {
        first_name: 'Andrew',
      }
    }

    this.handleClose = this.handleClose.bind(this);
  }

  componentWillMount() {
    this.props.dispatch(fetchUsers());
  }


  /**
   * Open the user modal
   */
  openEditUserModal() {
    this.setState({
      userModalOpen: true,
      isEditingUser: true,
      modalTitle: 'Edit user'
    });
  }


  /**
   *  Open the modal to create a user
   */
  openCreateUserModal() {
    this.setState({
      userModalOpen: true,
      modalTitle: 'Create a user'
    });
  }


  /**
   *  Close the modal
   */
  handleClose() {
    this.setState({
      userModalOpen: false,
      isEditingUser: false
    });
  }


  /**
   *  Submit the user form
   */
  submit(formProps) {
    const user = {
      first_name: formProps.get('first_name'),
      last_name: formProps.get('last_name'),
      email: formProps.get('email'),
      phone: formProps.get('phone'),
      role: formProps.get('role'),
    };

    // Dispatch action to convert the request to a work order
    this.props.dispatch(createUser(user));
  }


  /**
   *  Make the roles not look so techy
   */
  prettifyRoles(role) {

    let prettyRole = '';
    switch(role) {
      case "Role_Member":
        prettyRole = 'Member';
      break;
      case "Role_Supervisor":
        prettyRole = 'Supervisor';
      break;
      case "Role_Manager":
        prettyRole = 'Manager';
      break;
      case "Role_Director":
        prettyRole = 'Director';
      break;
      case "Role_Admin":
        prettyRole = 'Admin';
      break;
    }

    return prettyRole;
  }


  render() {
    // Redux Form Props.
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <div className="page__wrapper customers-page">
        <div className="container row">
          <div className="col-md-12 col-xs-12 col-sm-12">
            <div className="customer-content">

              <div className="block__header__wrapper">
                <div className="block__header">
                  <div className="block__title">
                    Users
                    <button onClick={::this.openCreateUserModal}>Create a user</button>
                  </div>
                </div>
              </div>

              <div className="block__body">
                <table className="responsive-table">
                  <thead>
                    <tr>
                      <th scope="col">Name</th>
                      <th scope="col" style={{textAlign:"left"}}>Role</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.props.users.map((user, index) => {
                      return (
                        <tr key={index}>
                          <th scope="row">
                            {user.profile.firstName} {user.profile.lastName}
                          </th>
                          <td style={{textAlign:"left"}}>{this.prettifyRoles(user.role)}</td>
                          <td><button onClick={::this.openEditUserModal}>Edit</button></td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>


                <Dialog
                  title={this.state.modalTitle}
                  modal={false}
                  open={this.state.userModalOpen}
                  onRequestClose={this.handleClose}
                >
                  <form>
                   <div className={styles.form__row}>
                     {this.state.isEditingUser ? (
                       <Field
                         name="first_name"
                         component={TextField}
                         hintText="First Name"
                       />
                     ) : (
                       <Field
                         name="first_name"
                         component={TextField}
                         hintText="First Name"
                       />
                     )}
                   </div>
                   <div className={styles.form__row}>
                     <Field
                       name="last_name"
                       component={TextField}
                       hintText="Last Name"
                     />
                   </div>
                   <div className={styles.form__row}>
                     <Field
                       name="email"
                       component={TextField}
                       hintText="Email"
                     />
                   </div>
                   <div className={styles.form__row}>
                     <Field
                       name="phone"
                       component={TextField}
                       hintText="Phone"
                     />
                   </div>
                   <div className={styles.form__row}>
                     <Field
                       name="role"
                       component="select"
                       placeholder="Select role of the user"
                     >
                       <option value="Role_Member">Member</option>
                       <option value="Role_Supervisor">Supervisor</option>
                       <option value="Role_Manager">Manager</option>
                       <option value="Role_Director">Director</option>
                       <option value="Role_Admin">Admin</option>
                     </Field>

                   </div>
                   <div className="page-form__block">
                     <div className="submit__block">
                       <RaisedButton label="Create user" disabled={pristine || submitting} onClick={handleSubmit(::this.submit)} primary={true} />
                       <FlatButton
                         label="Cancel"
                         primary={true}
                         onTouchTap={::this.handleClose} //
                       />,
                     </div>
                   </div>
                  </form>
                </Dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = selectManageUsersPage();

function mapDispatchToProps(dispatch) {
  return {
    dispatch
  };
}

export default reduxForm({
  form: 'manageUsersPage',
  initialValues: {
    first_name: this.state.user.first_name
  }
})(connect(mapStateToProps, mapDispatchToProps)(ManageUsersPage));

Answer 1

要填充整个表单，您可以使用this.props.initialize。或者，如果您只想更改特定字段，可以使用this.props.change。请参阅here的说明。您还可以通过调度此操作来从装饰表单组件外部调用这些：

{
    store: 'form',
    type: '@@redux-form/INITIALIZE',
    meta: { form: 'manageUsersPage' },
    payload: initialValues
}

Redux表单 - 从状态加载initiaValues，所有这些都在一个容器中

1 个答案: