Question

我有一个反应选择组件，我与redux-form兼容。我的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

options的形状是什么？ - 通常它是一个具有值和标签属性的对象数组：

[
  { label: "I like", value: "icecream" },
  { label: "Any", value: "Any" }
]

您可以通过将其设置为options数组中的某个值来设置react-select的初始value道具。或者，您也可以通过为其提供带有标签和值的对象，将其设置为非现有选项。 label显示为选择的value。确实有点令人困惑，尽管它有点意义。

<强> TL; DR

value={{ value: 0, label: 'Any' }} - 会做的！

您也可以将初始值设置为选项的值，然后显示。这意味着，如果您的选项{ value: "Any", label: "Any" }中有value={'Any'}，则会显示＆＃34;任何＆＃34;在选择中。

希望这适合你！

Answer 2

陷入类似的问题。即使正确传递，输入值字段也会不断设置。你可以创建一个具有值prop的input对象（以及所有其他必需的道具），或者在这种情况下使用单独的prop selectedValue。

 <Field
  id="side"
  name="side"
  component={SelectInput}
  options={sideOptions}
  value="Any"
  clearable={false}
  selectedValue={this.props.myvalue}
 />

const MySelect = props => (
  <Select
   {...props}
   value={(props.input.value) ? props.input.value : props.selectedValue}
   onChange={value => props.input.onChange(value)}
   onBlur={() => props.input.onBlur(props.input.value)}
   options={props.options}
   placeholder={props.placeholder}
  />
);

react-select中的默认值

2 个答案: