如何在 react-select 中设置默认值答案

【问题标题】：How to set a default value in react-select如何在 react-select 中设置默认值
【发布时间】：2017-09-15 16:20:57
【问题描述】：

我在使用 react-select 时遇到问题。我使用 redux 表单，并且我的 react-select 组件与 redux 表单兼容。代码如下：

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>

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

【问题讨论】：

这是正确的：value={props.input.value}。你面临什么问题？
我的问题是我希望我的选择在我第一次渲染它时有一个 defaultValue 但我不能
第一次渲染时 props.input.value 的值是多少？
这是我的问题。如何将其设置为具有默认值？
你想要什么值？

标签： reactjs default-value react-select

【解决方案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}
  />
);

【讨论】：

与 redux/react 绑定的重点是让 ui 实时反映对象的值。这种方法解耦了这种绑定。考虑在 reducer 中设置默认值。
@JosephJuhnke 先检查问题。这是如何设置默认值。
selectedValue 已更改为 value。检查文档react-select.com/props
新版本中现在有defaultValue字段。
棘手的是您需要将所选对象设置为“defaultValue”字段，而不是选项的值。例如0,1,2

【解决方案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
              });
           }}
/>

【讨论】：

谢谢，现在我知道 defaultValue 接受对象而不仅仅是值。
不是根据 React 文档或智能感知它没有：reactjs.org/docs/uncontrolled-components.html#default-values
@Alex - （以及 2 年后这里的任何人），这个问题是参考 react-select，一个组件库。您链接到的文档参考了原生 HTML 选择元素。

【解决方案3】：

如果您来这里是为了 react-select v2，但仍然遇到问题 - 版本 2 现在只接受 value、defaultValue 等对象。

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

【讨论】：

不完整。如果您将值设置为该值，则无法再更改该值
@Toskan - 是的，这是 ReactJS 和单向数据绑定的原则之一，它影响所有表单元素，而不仅仅是这个库。如果您选择使用受控组件，则需要在 react 之外自行处理更改。这个答案谈到它并链接到 React 文档：stackoverflow.com/questions/42522515/…
好吧，那么您的解决方案解决了什么问题？也就是说，硬编码一个值？
这里给出的{value: 'one', label: 'One'}的例子只是一个例子。在您的应用程序中，这将是一个具有相同结构的变量/道具。
数据绑定的一种方式并不意味着一旦从道具设置的数据不能在子组件中更改，如果愿意的话。如果使用defaultValue 而不是value，这正是会发生的情况

【解决方案4】：

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

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

然后将选择元素值最初与选项值匹配。

<select 
    value={this.value} />

【讨论】：

我认为这是最好/最优雅的解决方案。我这样想对吗？
如果这样做，值不会改变，你已经写了onChange函数也设置了改变
这是一个普通的 HTML ，这是问题的目的。套管可以使一切变得不同:)

【解决方案5】：

扩展@isaac-pak 的回答，如果你想在 props 中将默认值传递给你的组件，你可以在 componentDidMount() 生命周期方法中将其保存在 state 中，以确保第一次选择默认值。

请注意，我已更新以下代码以使其更完整，并使用空字符串作为每个注释的初始值。

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
};

【讨论】：

我明白了：警告：select 上的 value 属性不应为空。考虑使用空字符串来清除组件或undefined 用于不受控制的组件。
我也在做同样的事情，我收到了这个警告：Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).
@AlexVentura 我已经使我的代码更加完整，并在我的系统上对其进行了测试。我没有收到有关受控输入的警告。尝试根据我编辑的回复更新您的代码，然后发回您找到的内容。

【解决方案6】：

像这样使用 defaultInputValue 道具：

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

【讨论】：

【解决方案7】：

传递value 对象：

<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}
                  />

【讨论】：

对于任何未来的读者来说，这可能是最好和最简单的选择。 value 属性也可以在没有 redux 的情况下工作。

【解决方案8】：

我自己刚刚经历了这个，并选择在减速器 INIT 函数中设置默认值。

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

【讨论】：

【解决方案9】：

如果您在选项中使用组，则需要进行深度搜索：

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};

【讨论】：

【解决方案10】：

当我按照上面的所有答案进行操作时，我想到了，我应该写这个。

您必须设置属性 value，而不是 DefaultValue。我花了几个小时使用它，阅读文档，他们提到使用 DefaultValue，但它不起作用。正确的方法是，

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

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

【讨论】：

为此我会在你背后亲吻你！谢谢大佬。

【解决方案11】：

如果您没有使用 redux-form 并且您使用本地状态进行更改，那么您的 react-select 组件可能如下所示：

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

【讨论】：

【解决方案12】：

我经常使用这样的东西。

本例中 props 的默认值

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}

【讨论】：

【解决方案13】：

使用 <select value={stateValue}>。确保stateValue 中的值在选择字段中给出的选项中。

【讨论】：

【解决方案14】：

几点：

defaultValue 适用于初始渲染，不会在连续渲染过程中更新。确保在您拥有 defaultValue 之后渲染 Select。
defaultValue 应该像这样以对象或对象数组的形式定义：{value:'1', label:'Guest'}，最防弹的方法是将其设置为选项列表项：myOptionsList[selectedIndex]

【讨论】：

【解决方案15】：

如果你的选择是这样的

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

您的{props.input.value} 应与您的{props.options} 中的'value' 之一匹配

意思是，props.input.value 应该是'one' 或'two'

【讨论】：

【解决方案16】：

自动选择 in select 的值。

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

在select标签中使用value属性

value={this.state.contactmethod || ''}

解决方案对我有用。

【讨论】：

【解决方案17】：

在构造函数中为默认选项文本创建状态属性
- 不用担心默认选项值
为渲染函数添加一个选项标签。只显示使用状态和三元表达式
创建一个函数以在选择选项时进行处理

将此事件处理函数中的默认选项值的状态更改为 null

Class MySelect extends React.Component
{
    constructor()
    {
        super()
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            selectDefault: "Select An Option"
        }
    }
    handleChange(event)
    {
        const selectedValue = event.target.value;
        //do something with selectedValue
        this.setState({
            selectDefault: null
        });
    }
    render()
    {
        return (
        <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
            {this.selectedValue}>
         {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
            {'map list or static list of options here'}
        </select>
        )
    }
}

【讨论】：

【解决方案18】：

如果你想在 react-select 中定义自定义标签，试试这个。

  <Select
    getOptionLabel={({ name }) => name}
  />

【讨论】：

【解决方案19】：

您可以简单地这样做：

在 react-select 中，初始选项值

const optionsAB = [
  { value: '1', label: 'Football' },
  { value: '2', label: 'Cricket' },
  { value: '3', label: 'Tenis' }
];

仅提供 API：

apiData = [
  { games: '1', name: 'Football', City: 'Kolkata' },
  { games: '2', name: 'Cricket', City: 'Delhi' },
  { games: '3', name: 'Tenis', City: 'Sikkim' }
];

在 react-select 中，为 defaultValue=[{value: 1, label: Hi}]。像这个例子一样使用defaultValue：

<Select
  isSearchable
  isClearable
  placeholder="GAMES"
  options={optionsAB}
  defaultValue={{
    value: apiData[0]?.games , 
    label: (optionsAB || []).filter(x => (x.value.includes(apiData[0]?.games)))[0]?.label
  }}
  onChange={(newValue, name) => handleChange(newValue, 'games')}
/>

你也可以在 Java 中正常使用它。

【讨论】：