Question

我正在使用react-select作为自动完成和与选项相关的字段。当我选择该选项时，它将整个选项对象作为{value: 'abc', label: 'ABC'}传递，但我只想将值作为字符串而不是对象传递。因此，我使用了getOptionValue，但是它没有按预期工作。

这就是我所做的

<Field
  name='status'
  component={SearchableText}
  placeholder="Search..."
  options={status}
  styles={styles}
  getOptionLabel={option => option.label}
  getOptionValue={option => option.value}
/>

我同时使用了getOptionLabel和getOptionValue，但仍以对象形式传递所选选项，而不仅仅是将值作为字符串传递。

预期一个

status: 'active'

当前行为

status: { value: 'active', label: 'Active'}

Answer 1

我在react-select的文档中找不到getOptionValue，但是您始终可以在react-select周围创建一个适配器。即创建您自己的Select组件，该组件在内部使用react-select的Select组件。完成此操作后，就可以创建自己的getOptionValue。您可以使用它来确保该值是一个字符串。

import React from "react";
import Select from "react-select";

class MySelect extends React.Component {
  getSelectValue() {
    return this.props.options.find(
      option => this.props.getOptionValue(option) === this.props.input.value
    );
  }

  render() {
    console.log("value", this.props.input.value);
    return (
      <Select
        value={this.getSelectValue()}
        onChange={option => {
          this.props.input.onChange(this.props.getOptionValue(option));
        }}
        options={this.props.options}
      />
    );
  }
}

MySelect.defaultProps = {
  getOptionValue: v => v
};

const MyForm = reduxForm({ form: "MyForm" })(
  class extends React.PureComponent {
    render() {
      return (
        <Field
          name="myCoolSelect"
          component={MySelect}
          options={[
            { value: "chocolate", label: "Chocolate" },
            { value: "strawberry", label: "Strawberry" },
            { value: "vanilla", label: "Vanilla" }
          ]}
          getOptionValue={option => option.value}
        />
      );
    }
  }
);

以上是如何使它工作的基本示例。您可能希望传递其他输入或元道具以利用其他redux形式的功能。例如onBlur，onFocus等。您可以在此处查看其运行情况：https://codesandbox.io/s/6wykjnv32n

选择选项时将值作为字符串发送

1 个答案: