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

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

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

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

class MySelect extends Component {

constructor() {
    super()
}

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

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

在React-hook-form的useForm钩子中，提供了defaultValues参数。

const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      select: { label: "20", value: 20 },
    },
  });

React-Select 组件

<Select
     optons={[
        { value: "20", label: "20" },
        { value: "30", label: "30" },
        { value: "25", label: "25" },
      ]}
/>

或者

为 react-select 组件提供 defaultValue 属性

<Select
   defaultValue={{ label: "20", value: 20 }
   optons={[
      { value: "20", label: "20" },
      { value: "30", label: "30" },
      { value: "25", label: "25" },
   ]}
/>

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

几个要点：

1. defaultValue 只对初始渲染有效，它不会在后续的渲染过程中更新。请确保在获取 defaultValue 后再渲染您的选择器。

2. defaultValue 应以对象或对象数组的形式定义，例如： {value:'1', label:'Guest'}，最可靠的方法是将其设置为选项列表的项目：myOptionsList[selectedIndex]

我经常使用类似以下的代码。

在这个例子中，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> 
}

想要在这里加入我的两分钱，使用Hooks，

您可以订阅DropDown中的props

import React, { useEffect, useState } from 'react';
import Select from 'react-select';

const DropDown = (props) => {
  const { options, isMulti, handleChange , defaultValue } = props;
  const [ defaultValueFromProps, setdefaultValueFromProps ] = useState(undefined)

  useEffect(() => {
    
    if (defaultValue) {
      setdefaultValueFromProps(defaultValue)
    }
  }, [props])
  
  const maybeRenderDefaultValue = () => {
    if (defaultValue) {
      return { label: defaultValueFromProps, value: defaultValueFromProps }
    } 
  }
  return (
    <div>
      <Select 
        width='200px'
        menuColor='red'
        isMulti={isMulti} 
        options={options} 
        value={maybeRenderDefaultValue()}
        clearIndicator
        onChange={(e) => handleChange(e)}
      />
    </div>
  )
}

export default DropDown;

然后在父组件中，要么传递初始值，要么传递从状态改变的值

<DropDown options={GenreOptions} required={true} defaultValue={recipeGenre === undefined ? recipe.genre : recipeGenre} handleChange={handleGenreChange}/>

如果这是一个新表单（没有默认值），那么您就不必担心，因为useEffect将忽略设置任何内容。

如果您的选项是这样的：

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

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

也就是说，props.input.value应该是'one'或'two'

自动选择 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 || ''}

这个解决方案对我有效。

1. 在构造函数中为默认选项文本创建一个状态属性
   • 不用担心默认选项值
2. 在渲染函数中添加一个选项标签。只使用状态和三元表达式显示
3. 创建一个处理选项被选中的函数

4. 在此事件处理程序函数中更改默认选项值的状态为null

   Class MySelect extends React.Component
   {
       constructor()
       {
           super()
           this.handleChange = this.handleChange.bind(this);
           this.state = {
               selectDefault: "选择一个选项"
           }
       }
       handleChange(event)
       {
           const selectedValue = event.target.value;
           //对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> : ''}
               {'在这里映射列表或静态选项'}
           </select>
           )
       }
   }