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

Question

我正在尝试让 react-select 的 multi-select 组件将 selected 值作为字符串数组提交，但它作为一个{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} 对象。例如select输入第一项并提交表格会得到 [{val: "first-value", display: "First Value" }]，而我只想要 ["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"]

Answer 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))}

如何使用 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