Question

我的redux表单作为支柱接收列表类别如下：

[{"id": 1, "name_of_category": "foo"}, {"id": 2, "name_of_category": "bar"}]

使用来自redux表单网站的this example，我成功地将多选React Widget内置到我的表单中，这样用户就可以选择＆＃34; foo＆＃34;或＆＃34; bar＆＃34;或两者兼而有之。我的表单还成功返回所选类别的名称列表，即表单提交时的["foo", "bar"]。

这一切都很好，但为了让我的生活更容易在后端，我想返回一个所选类别的id列表而不是名单。

我能做些什么呢？我是否需要引入一个可以完成这项工作的附加功能？或者，React Widget包中有内置功能吗？

以下是我的redux表单的代码片段：

import React from 'react';
import Multiselect from 'react-widgets/lib/Multiselect'
import { Field, reduxForm } from 'redux-form';
import { Form, Button } from 'reactstrap';

import 'react-widgets/dist/css/react-widgets.css'

const required = value => value ? undefined : 'Required';
const renderMultiselect = ({ input, data, valueField, textField }) => 
  let categories = [];
  data.map(category => categories.push(category.name));
  return (
    <Multiselect {...input}
      onBlur={() => input.onBlur()}
      value={input.value || []}
      data={categories}
      valueField={valueField}
      textField={textField}
    />
  )
};

const MyForm = (props) => {
  const { handleSubmit, submitting, onSubmit, categories } = props;
  return (
    <Form name="myform" onSubmit={handleSubmit(onSubmit)}>      
      <div>
        <label>Categories</label>
        <Field
          name="categories"
          component={renderMultiselect}
          data={categories} />
      </div>
      <Button color="primary" type="submit" disabled={submitting}>
        Submit
      </Button>
    </Form>
  );
};

export default reduxForm({
  form: 'myform',
  enableReinitialize: true
})(MyForm);

Answer 1

根据DOC：

<强> Data Array:

为Multiselect提供一系列可能的值。如果是数组如果提供了对象，则应使用valueField和textField props，指定哪些对象属性包含值字段（例如id）和用于标记项目的字段。

valueField:

当值prop本身不是dataItem时，需要valueField。

<强> textField:

指定要在Multiselect和中显示的数据项字段选定的项目。

这意味着如果数据格式为：

，则需要指定valueField和textField

[{}, {}, {}]

像这样写：

data = [{"id": 1, "name_of_category": "foo"}, {"id": 2, "name_of_category": "bar"}]

<Multiselect {...input}
   onBlur={() => input.onBlur()}
   value={input.value || []}
   data={data}                        //data will be same data not the name of categories
   valueField="id"                    //value will be id
   textField="name_of_category"       //text will be name of category
/>

更改Redux Form Multiselct React Widget的返回值

1 个答案: