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

我正在为自动完成和选项相关字段使用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}
/>

当前行为

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

---

我在react select的文档中找不到

getOptionValue

，但您可以始终围绕react select创建适配器。i、 e.创建自己的选择组件，在内部使用react 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}
        />
      );
    }
  }
);

从“React”导入React；
从“反应选择”导入选择；
类MySelect扩展了React.Component{
getSelectValue（）{
返回此.props.options.find(
option=>this.props.getOptionValue（option）==this.props.input.value
);
}
render（）{
log（“value”，this.props.input.value）；
返回(
{
this.props.input.onChange（this.props.getOptionValue（option））；
}}
options={this.props.options}
/>
);
}
}
MySelect.defaultProps={
getOptionValue:v=>v
};
const MyForm=reduxForm（{form:“MyForm”}）(
类扩展了React.PureComponent{
render（）{
返回(
option.value}
/>
);
}
}
);

---

上面是一个基本的例子，说明了如何让它工作。您可能希望传递其他输入或元道具，以利用其他redux表单功能。e、 g.

onBlur

，

onFocus

，等等。您可以在这里看到它的作用：

请创建演示以重现您的问题此代码的主要问题是对于某些选择字段，我可能需要对象，对于某些字段，我需要值，因为字符串。您是否与其他人一起处理此项目？这似乎会引起混乱。在海事组织，保持一致性更好。在任何一种情况下，如果您添加一个指示值类型的布尔属性，那么这段代码仍然可以工作。e、 g.

valueType={“string”}

vs

valueType={“object”}

。或者，您可以在

MySelect

中实现自己的

getOptionValue

您能给我看一个基于getOptionValue的示例，让它更通用吗？我理解valueType的概念，但不理解您正在引用的getOptionValue。因此，我使用名为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}
        />
      );
    }
  }
);