我有一个与 redux-form 兼容的 react-select 组件。我的 SelectInput 组件是这样的:
const MySelect = props => (
<Select
{...props}
value={props.input.value}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
/>
);
然后我在我的组件中渲染它,它是一个表单
<div className="select-box__container">
<Field
id="side"
name="side"
component={SelectInput}
options={sideOptions}
value="Any"
clearable={false}
// placeholder="Select Side"
/>
</div>
我还为容器设置了初始值,以便该组件的状态具有初始值并且它正在工作。我的问题是,当我渲染组件时,初始值未显示在选择框中并且它是空的。为什么会这样?
最佳答案
选项
的形状是什么? - 通常它是具有值和标签属性的对象数组:
[
{ label: "I like", value: "icecream" },
{ label: "Any", value: "Any" }
]
您可以通过将 react-select 的初始 value
属性设置为选项数组中的值之一来设置它。
或者,您也可以通过给它一个带有标签和值的对象,将它设置为一个不存在的选项。 label
是显示为选择的 value
的内容。确实有点令人困惑,尽管它在某种程度上是有道理的。
长话短说
value={{ value: 0, label: 'Any' }}
- 会成功的!
您也可以将初始值设置为您的选项值,它会显示出来。这意味着如果您在选项中有 { value: "Any", label: "Any"}
value={'Any'}
将在选择中显示“Any”。
希望这对你有用!
关于javascript - react 选择中的默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43273471/