如何从状态填充Redux-Form选择/下拉列表

Question

从州填充选择/下拉列表的最佳做法是什么？

我填充了像这样的redux形式......

import React from 'react';
import { connect } from 'react-redux';  
import { Field, reduxForm } from 'redux-form';  
import FormItem from '../FormItem.js';
import FormFooter from '../../components/FormFooter.js';
import Button from '../../components/Button.js';

let UserForm = props => {

  const { handleSubmit, onSubmit } = props;

    return (
    <form onSubmit={handleSubmit(onSubmit)}>

            <FormItem
                label = { <label htmlFor="firstName">First Name</label> }
                field = { <Field name="firstName" type="text" placeholder="First name" component="input" className="w-full"/>} 
            />

            <FormItem
                label = { <label htmlFor="lastName">Last Name</label> }
                field = { <Field name="lastName" type="text" placeholder="Last name" component="input" className="w-full"/> }
            />

            <FormFooter
                left={ <Button href="/users" icon="fa-ban" text="Cancel" /> }
                right={ <button type="submit">Save</button> }
            />

        </form>
    )
}

UserForm = reduxForm({
  form: 'userForm'
})(UserForm)

function mapStateToProps(state) {  
  return { initialValues: state.user.data }
}

UserForm = connect(mapStateToProps
)(UserForm)

export default UserForm

这是包含该表单并获取数据的文件：

import React from 'react';
import { connect } from 'react-redux';  
import PageHeaderBar from '../../components/PageHeaderBar.js';
import PageWrapper from '../PageWrapper.js';
import ContentWrapper from '../ContentWrapper.js';
import { loadUser, updateUser } from '../../actions/users';
import UserAccountForm from './UserAccountForm';
import { Values } from "redux-form-website-template";

class UserAccount extends React.Component {

  constructor(props) {
    super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
        this.props.loadUser(localStorage.getItem('userId'));
  }

  handleSubmit(formProps) {
    this.props.updateUser(formProps);
  }

  render() {

    return (

      <PageWrapper>

        <PageHeaderBar title="User profile" />

        <ContentWrapper>
                    <UserAccountForm onSubmit={this.handleSubmit} />
                    <Values form="userForm" />
        </ContentWrapper>

      </PageWrapper>
    );
  }
}

export default connect(null, { loadUser, updateUser })(UserAccount);  

根减速机：

import { combineReducers } from 'redux';  
import { reducer as formReducer } from 'redux-form';  
import authReducer from './auth_reducer';
import userReducer from './user_reducer';
import categoryReducer from './user_reducer';

const rootReducer = combineReducers({  
  auth: authReducer,
  form: formReducer,
  user: userReducer.
  category: categoryReducer
});

export default rootReducer; 

用户减速机：

import { LOAD_USER_SUCCESS, LOAD_USERS_SUCCESS } from '../actions/types';

const INITIAL_STATE = { data: {} }

export default function (state = {}, action) {  
  switch(action.type) {
    case LOAD_USER_SUCCESS:
      return { ...state, data: action.data };
    case LOAD_USERS_SUCCESS:
      console.log('LOAD_USER_SUCCESS');
      return { ...state, data: action.data };
    default:
      return state;
  }
}

现在我想使用以下组件向上面的表单添加一个select，并从state.category.data填充它的值。这是我到目前为止所拥有的......

import React from 'react';
import { connect } from 'react-redux';  
import { loadCategories } from '../../actions/categories';
import { Field, reduxForm } from 'redux-form';  
import FormItem from '../FormItem.js';
import VirtualizedSelect from 'react-virtualized-select'
import 'react-datepicker/dist/react-datepicker.css';

export const renderSelect = (field) => (
  <VirtualizedSelect
    onChange={field.input.onChange}
    optionHeight={35}
    value={field.input.value}
  />
);

class CategorySelects extends React.Component {

  constructor(props) {
    super(props);
    console.log( 'props' );
    console.log( props.data );
  }

  render() {
    return (
      <FormItem
        label = { <label htmlFor="type">Category</label> }
        field = { <Field name="type" component={renderSelect} onChange={this.handleTypeChange} /> }
      />
    );
  }
}

export default CategorySelects

我将其添加到表单中：

<CategorySelects name="categories" />

我不确定的是如何填充选择。现在我只使用state.user.data在UserForm上设置initialValues。我是否还需要在state.category.data中合并，或者我是否以错误的方式进行此操作？谢谢！

Answer 1

我可能会误解你的一些代码，但我认为你的问题是name中硬编码的CategorySelects

<Field name="type" component={renderSelect} onChange={this.handleTypeChange} />

由于您在通过时添加表单时传递了名称

然后你在Field上的CategorySelects应该是这样的

<Field name={props.name} component={renderSelect} onChange={this.handleTypeChange}/>

假设你的initialValues看起来像

{firstName: "Bob", lastName: "Smith", categories: [10, 20, 30] }

这将确保您的选项被选中，但我不知道您是如何将选项推入组件的。

如果填写你想要弄清楚的选项，那么是的，你需要将state.category.data推入你的组件，但是我不会通过redux-form这样做，我只是将这些数据作为支柱传递给CategorySelects，而这将反过来通过你的VirtualizedSelect功能将它传递给renderSelect。

如果用户数据看起来像这样，那么忽略我的答案的整个第一部分：

{firstName: "Bob", lastName: "Smith", type: 10 }

长期和短期是redux-form将帮助您管理表单的value，但是您可以像使用非redux表单一样处理选项。

以下是redux-form网站上的示例

<Field name="favoriteColor" component="select">
    <option />
    <option value="#ff0000">Red</option>
    <option value="#00ff00">Green</option>
    <option value="#0000ff">Blue</option>
</Field>

如果您的初始值对象是{favoriteColor: "#00ff00"}，则在呈现组件时将选择Green。