Question

我正在尝试获取react-select的multi-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}对象。例如选择第一项并提交表格会使我[{val: "first-value", display: "First Value" }]

我不太确定是否需要在react-final-form或react-select上解决

["first-value"]

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

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"}]

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的提交值？

1 个答案: