我正在使用 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'}
我getOptionValue在 react-select 的文档中找不到，但你总是可以围绕 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}
/>
);
}
}
);
上面是如何让这个工作的一个基本例子。您可能希望传递其他输入或元props以利用其他 redux-form 功能。例如onBlur，onFocus等等。你可以在这里看到它的实际效果：https : //codesandbox.io/s/6wykjnv32n