如何使用 react-select 获取字符串数组作为 react-final-form 的提交值？答案

【问题标题】：How can I get an array of strings as the submitted value for react-final-form using react-select?如何使用 react-select 获取字符串数组作为 react-final-form 的提交值？
【发布时间】：2019-08-09 06:49:01
【问题描述】：

我正在尝试让 react-select 的多选组件将所选值作为字符串数组提交，但它以 {label, value} 对象数组的形式出现。

我将通过 react-final-form 的 Field 组件传递给 react-select 的对象的结构是这样的：

[
{ val: "first-value", display: "First Value" }, 
{ val: "second-value", display: "Second Value" }, 
{val: "third-value", display: "Third Value"
];

传递 getOptionLabel={option => option.display} 属性可以将选项标签更改为对象给出的显示键。

但是，在提交时为 getOptionValue 做同样的事情仍然会给我整个 {val, display} 对象。例如当我只想要["first-value"]时，选择第一个项目并提交表单会得到我[{val: "first-value", display: "First Value" }]

我不太确定这是我需要在 react-final-form 还是 react-select 上解决的问题

import React from "react";
import { Field } from "react-final-form";
import { Form } from "react-final-form";
import Select from "react-select";

const data = [{ val: "1", display: "123" }, { val: "2", display: "321" }];
const Test2: React.FC<any> = () => {
  return (
    <Form
      onSubmit={values => console.log(values)}
      showErrorModal={showErrorModal}
      setShowErrorModal={setShowErrorModal}
    >
      {() => (
        <>
          <Field
            name="test"
            component={MultiSelect}
            label={"Multi Select test"}
            placeholder="Please Select..."
            options={data}
            getOptionLabel={option => `${option.display}`}
            getOptionValue={option => `${option.val}`}
          />
          <SubmitButton btnTxt="next" />
        </>
      )}
    </Form>
  );
};

export default Test2;

提交时，我在控制台上得到的消息是

[{"val": "1", "display": "123"}, {"val": "2", "display": "321"}]

而我希望的结果是 ["1","2"]

【问题讨论】：

标签： react-select react-final-form

【解决方案1】：

getOptionLabel & getOptionValue 仅供查看。

当我们获得选定的值时，它将为您提供完整的 object，因为我们向 options 提供了对象数组。

所以结果，

onSubmit={values => console.log(values)}

正确，即[{"val": "1", "display": "123"}, {"val": "2", "display": "321"}]

您需要进一步处理此结果以获得您想要的结果，

onSubmit={values => console.log(values.map(data=>data.val))}

【讨论】：