React-Select中的默认值

Question

我有一个React-Select组件，我使其与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>

我还将容器的初始值设置为这个组件的状态，它也能正常工作。但是我的问题是，当我渲染组件时，初始值不显示在选择框中，而是为空的。为什么会出现这种情况？

- RamAlx

---

你期望的值“any”应该在选择中被选中吗？ - Mayank Shukla

确切地说，我想用一个任意值来测试我的选择器，看看它是否在我的组件中呈现，但却没有成功。 - RamAlx

尝试这样做：交换这两行代码，而不是使用 {...props} value={props.input.value}，改为使用 value={props.input.value} {...props} 在 Select 组件中。 - Mayank Shukla

@MayankShukla 没有生效。 - RamAlx

还有其他的想法吗？我考虑像这样编辑我的selectInput <Select {...props} tempValue={props.input.value} {tempValue !== undefined ? value={tempValue} : value="Any" } // value={props.input.value} onChange={value => props.input.onChange(value)} // onBlur={() => props.input.onBlur(props.input.value)} options={props.options} placeholder={props.placeholder} // defaultValue="Any" /> 但是没有起作用... - RamAlx

可能是如何在react-select中设置默认值的重复问题。 - T. D. Ben

Answer 1

您的options的形式是什么？通常情况下，它是一个对象数组，其中包含一个值和一个标签属性：

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

您可以通过将react-select的初始`value`属性设置为选项数组中的某个值来进行设置。 另外，您也可以将其设置为不存在的选项，方法是给它一个具有标签和值的对象。`label`即为在选择时显示的值。虽然有些混淆，但这样做还是有一点道理的。

简而言之，value={{ value: 0, label: 'Any' }}就可以完成设置！

您也可以将初始值设置为选项的值，它会被显示出来。也就是说，如果您的选项中有{ value: "Any", label: "Any" }，那么使用value={'Any'}即可在选择时显示“Any”。

希望这对您有帮助！

- RemEmber

---

我的选项是一个对象数组，如下所示：const sideOptions = [ { label: '任何', value: '任何' }, { label: '购买', value: '购买' }, { label: '出售', value: '出售' } ];。我想让我的SelectInput的标签为“任何”，值为“任何”。我已经设置了value={{ value=0, label='任何' }}，但最终没有起作用。 - RamAlx

更具体地说，我应该添加initialValue = {props.initialValue}，然后在我的组件中添加initialValue = {{label：'任何'，value：'任何'}}吗？ - RamAlx

抱歉回复晚了！你可以在 React-Select 上设置 value 属性为你的初始值。React-Select 中没有 initialValue 属性。希望这样能够解决你的疑问。 - RemEmber

是的，但这是针对 react-select 1.x 和 2.x 的。 - RemEmber

Answer 2

遇到了类似的问题。输入值字段始终未设置，即使已正确传递。您可以创建一个具有值属性（和所有其他所需属性）的input对象，或在这种情况下使用单独的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}
  />
);

- tmueller