更改返回终极版形式Multiselct的价值做出反应的Widget

Question

我的终极版形式接收作为道具的类别清单如下：

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

从终极版形式的网站使用this example，我成功地内置多选阵营的Widget到我的表格，所以用户可以选择“foo”或“bar”或两者。我的表单还成功地返回了表单提交中所选类别的名称列表，即["foo", "bar"]。

这一切都很好，但为了让我的生活在后端更轻松，我想返回所选类别的ID列表而不是名称列表。

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

这是我的终极版形式的代码片断：

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:

提供用于复选的可能值的阵列。如果提供了对象的数组 ，则应使用valueField和textField props来指定哪些对象属性包含值字段 （如id）以及用于标记项目的字段。

valueField:

甲valueField当该值支柱本身不是DataItem的是必需的。

textField:

指定哪些数据项字段中复选和 选择的项目显示。

这意味着你需要指定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 
/>