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

Question

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

我填充了一个像这样的 redux-form...

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;
  }
}

现在我想使用以下组件向上面的表单添加一个选择，并从 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

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

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

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

那么你在CategorySelects 上的Field 应该是这样的

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

假设您的 initialValues 看起来像

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

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

如果填充您想要找出的选项，那么是的，您需要将 state.category.data 推送到您的组件中，但我不会通过 redux-form 执行此操作，我只会将该数据作为支持CategorySelects，然后通过您的renderSelect 函数将其传递给VirtualizedSelect。

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

{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"}，那么组件渲染时会选择绿色。