javascript - react 选择中的默认值

Question

我有一个与 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>

我还为容器设置了初始值，以便该组件的状态具有初始值并且它正在工作。我的问题是，当我渲染组件时，初始值未显示在选择框中并且它是空的。为什么会这样？

Answer 1

选项 的形状是什么？ - 通常它是具有值和标签属性的对象数组:

[
  { 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”。

希望这对你有用!