如何在React-Select中设置默认值

Question

我在使用react-select时遇到了问题。我使用redux form，而且我已经使我的react-select组件与redux form兼容。以下是代码:

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}
        selectedValue={props.selectedValue}
    />
);

这是我如何渲染它：

<div className="select-box__container">
    <Field
    id="side"
    name="side"
    component={SelectInput}
    options={sideOptions}
    clearable={false}
    placeholder="Select Side"
    selectedValue={label: 'Any', value: 'Any'}
    />
</div>

但问题是我的下拉列表没有我想要的默认值。我做错了什么？有什么想法吗？

- RamAlx

---

这是正确的：value={props.input.value}。你遇到了什么问题？ - Ved

我的问题是，我希望在首次渲染时为我的选择设置一个defaultValue，但我无法实现。 - RamAlx

当它首次渲染时，props.input.value的值是多少？ - Ved

这是我的问题。如何设置默认值？ - RamAlx

你想要什么值？ - Ved

我想要一个默认值为“任何”的值。 - RamAlx

Answer 1

我想你需要像这样的东西：

const MySelect = props => (
<Select
    {...props}
    value = {
       props.options.filter(option => 
          option.label === 'Some label')
    }
    onChange = {value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

#编辑1：在新版本中

const MySelect = props => (
<Select
    {...props}
     options={props.options} 
    onChange = {value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}//If needed
    defaultValue={props.defaultValue || 'Select'}
    options={props.options}
    placeholder={props.placeholder}
  />
);

- Ved

---

与redux/react绑定的目的是让UI实时反映对象的值。这种方法可以将绑定解耦。考虑在reducer中设置默认值。 - Joseph Juhnke

@JosephJuhnke 先检查问题。问题是如何设置默认值。 - Ved

selectedValue 已经更改为 value。请查看文档 https://react-select.com/props。 - transang

新版本中现在有一个名为defaultValue的字段。 - Hongbo Miao

需要注意的是，您需要将所选对象设置为“defaultValue”字段，而不是选项的值。例如：0、1、2。 - andyCao

Answer 2

我使用了defaultValue参数，下面是我的代码，实现了默认值以及在从下拉菜单中选择选项时更新默认值。

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

- TejasPancholi

---

谢谢，现在我知道 defaultValue 取对象而不仅仅是数值。 - Dennis Liu

不是根据React文档或智能感知，它并不是这样的：https://reactjs.org/docs/uncontrolled-components.html#default-values - Alex

@Alex - （对于两年后任何人），这个问题是关于react-select，一个组件库。您链接的文档是关于本机HTML选择元素的。 - Rashad Nasir

defaultValue 的技巧并不简单，它需要一个对象而不是简单的 val。谢谢。 - Miftah Classifieds

Answer 3

如果您来这里是为了react-select v2，并且仍然遇到困难 - 版本2现在只接受一个对象作为value，defaultValue等。

也就是说，尝试使用 value={{value: 'one', label: 'One'}}，而不是只使用 value={'one'}。

- eedrah

---

不完整。如果您将值设置为该值，将无法再更改该值。 - Toskan

@Toskan - 是的，这是 ReactJS 和单向数据绑定的原则之一，影响所有表单元素，而不仅限于此库。如果您选择使用受控组件，则需要在 react 外部自行处理更改。这个答案讨论了这个问题，并链接到了 React 文档: https://dev59.com/bFgQ5IYBdhLWcg3wl1B3 - eedrah

好的，很公平。那么你的解决方案解决了什么问题呢？也就是说，硬编码一个值？ - Toskan

这里给出的{value: 'one', label: 'One'}仅仅是一个例子，在你的应用中，这将是一个具有相同结构的变量/属性。 - eedrah

单向数据绑定并不意味着从属性设置的数据不能在子组件内部更改，如果需要更改，则会发生这种情况。如果使用defaultValue而不是value，那么这正是会发生的。 - Amartya Mishra

Answer 4

我遇到了类似的错误。请确保你的选项有value属性。

<option key={index} value={item}> {item} </option>

然后将select元素的值最初匹配到选项值。

<select 
    value={this.value} />

- Drizzel

---

我认为这是最好/最优雅的解决方案。我的想法正确吗？ - user2026178

如果要改变值，您必须编写onChange函数来设置更改，否则值不会改变。 - raghul

这是针对普通的 HTML <select> 元素，而不是 react-select 的 <Select>，这也是问题所在。大小写可以产生很大的差别 :) - Mike Goatly

Answer 5

在 @isaac-pak 的回答基础上拓展，如果你想将默认值作为属性传递给你的组件，你可以在 componentDidMount() 生命周期方法中保存它以确保第一次选择默认值。

请注意，我已更新以下代码以使其更完整，并根据评论使用空字符串作为初始值。

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

- Dan Meigs

---

我得到了这个警告：select 上的 value 属性不应为 null。考虑使用空字符串来清除组件，或者对于不受控制的组件使用 undefined。 - Jason Rice

我也在做同样的事情，但是我收到了这个警告：警告：组件正在将一个受控输入类型的隐藏元素更改为不受控。输入元素不应从受控转换为不受控（反之亦然）。 - alexventuraio

@AlexVentura 我已经让我的代码更加完整，并在我的系统上进行了测试。我没有收到关于受控输入的警告。尝试根据我的编辑响应更新你的代码，然后回复你发现了什么。 - Dan Meigs

Answer 6

使用 defaultInputValue 属性，写法如下：

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

          

更多参考请查看 https://www.npmjs.com/package/react-select

- Dasun Bandara

Answer 7

我看了上面所有的回答后，想到应该写下这篇文章。

你需要设置属性中的value，而不是DefaultValue。我曾经使用DefaultValue花费了数小时时间，并阅读了文档，但它并没有起作用。使用正确的方法应该是：

options=[{label:'mylabel1',value:1},{label:'mylabel2',value:2}]
seleted_option={label:'mylabel1',value:1}

<Select
options={options}
value={selected_option}/>

- Shamsul Arefin

---

在这种情况下，您可以将默认值设置为选项的索引<Select options={options} value={options[0]} />。 - ronate

Answer 8

传递值对象:

<Select
                    isClearable={false}
                    options={[
                      {
                        label: 'Financials - Google',
                        options: [
                          { value: 'revenue1', label: 'Revenue' },
                          { value: 'sales1', label: 'Sales' },
                          { value: 'return1', label: 'Return' },
                        ],
                      },
                      {
                        label: 'Financials - Apple',
                        options: [
                          { value: 'revenue2', label: 'Revenue' },
                          { value: 'sales2', label: 'Sales' },
                          { value: 'return2', label: 'Return' },
                        ],
                      },
                      {
                        label: 'Financials - Microsoft',
                        options: [
                          { value: 'revenue3', label: 'Revenue' },
                          { value: 'sales3', label: 'Sales' },
                          { value: 'return3', label: 'Return' },
                        ],
                      },
                    ]}
                    className="react-select w-50"
                    classNamePrefix="select"
                    value={{ value: 'revenue1', label: 'Revenue' }}
                    isSearchable={false}
                    placeholder="Select A Matric"
                    onChange={onDropdownChange}
                  />

- Mitesh K

---

对于任何未来的读者，这可能是最好和最简单的选择。价值主张即使没有redux也可以工作。 - Arca Ege Cengiz

Answer 9

使用defaultValue替代selected

如果你想要隐藏菜单中的值，使用hidden：

<option defaultValue hidden>
   {'--'}
</option>
{options.map(opt => (
    <option key={opt} value={opt.replaceAll(/[,'!?\s]/gi, '')}>
       {opt}
    </option>
))}

- Shakespear

Answer 10

我刚刚自己经历了这个问题，选择在reducer的INIT函数中设置默认值。

如果您将您的select与redux绑定，那么最好不要使用不代表实际值的select默认值来“解除绑定”，而是在初始化对象时设置值。

- Joseph Juhnke