如何在 react-select 中設置默認值

Question

我在使用 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>

但問題是我的下拉列表沒有我希望的默認值。 我做錯了什么？ 有任何想法嗎？

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

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

Answer 3

如果您來這里是為了 react-select v2，但仍然遇到問題 - 版本 2 現在只接受一個對象作為value 、 defaultValue等。

也就是說，嘗試使用value={{value: 'one', label: 'One'}} ，而不僅僅是value={'one'} 。

Answer 4

我遇到了類似的錯誤。 確保您的選項具有 value 屬性。

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

然后將選擇元素值最初與選項值匹配。

<select 
    value={this.value} />

Answer 5

擴展@isaac-pak 的答案，如果您想將默認值傳遞給 prop 中的組件，您可以將其保存在 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
};

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

Answer 7

我自己剛剛經歷了這個並選擇在 reducer INIT 函數中設置默認值。

如果您使用 redux 綁定您的選擇，那么最好不要使用不代表實際值的選擇默認值“解除綁定”，而是在初始化對象時設置該值。

Answer 8

如果在選項中使用組，則需要進行深度搜索：

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

Answer 9

如果您沒有使用 redux-form 並且您使用本地狀態進行更改，那么您的 react-select 組件可能如下所示：

class MySelect extends Component {

constructor() {
    super()
}

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

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

Answer 10

我經常使用這樣的東西。

本例中 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> 
}

Answer 11

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

Answer 12

使用<select value={stateValue}> 。 確保stateValue中的值在選擇字段中給出的選項中。

Answer 13

如果你的選擇是這樣的

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

您{props.input.value}應匹配的一個'value'在您的{props.options}

意思是， props.input.value應該是'one'或'two'

Answer 14

自動選擇 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 || ''}

解決方案對我有用。

Answer 15

1. 在構造函數中為默認選項文本創建狀態屬性
   • 不用擔心默認選項值
2. 向渲染函數添加選項標簽。 僅顯示使用狀態和三元表達式
3. 創建一個函數以在選擇選項時進行處理

4. 將此事件處理函數中默認選項值的狀態更改為空

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

Answer 16

在 react-select 中，如果你想定義自定義標簽，試試這個。

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

Answer 17

幾點：

1. defaultValue適用於初始渲染，它不會在順序渲染過程中更新。 確保在手頭有defaultValue之后呈現您的 Select 。

2. defaultValue應以對象或對象數組的形式定義，如下所示： {value:'1', label:'Guest'} ，最安全的方法是將其設置為選項列表的項目： myOptionsList[selectedIndex]

Answer 18

當我按照上面的所有答案進行操作時，我想到了，我應該寫這個。

你必須設置 prop值，而不是DefaultValue 。 我花了幾個小時來使用它，閱讀文檔，他們提到使用 DefaultValue，但它不起作用。 正確的方法是，

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

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

Answer 19

使用defaultValue而不是selected

如果要從菜單中隱藏值，請使用hidden ：

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

Answer 20

想用 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;

然后在父組件中從 state 傳遞初始值或更改值

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

然后，如果它是一個新的形式（沒有默認值），你不必擔心，因為 useEffect 會忽略設置任何東西

Answer 21

在React-hook-form的useForm hook 中提供defaultValues參數

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

反應選擇組件

<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" },
   ]}
/>

Answer 22

我認為您可以在標簽處使用選定的道具

         <select
            defaultValue={plan.name}
            className="select w-full max-w-xs text-gray-700 mt-4"
          >
            {plans.vps.map((i) => (
              <option
                selected={plan.name == i.name}
                key={i.name}
                className="p-2 border"
                value={i.name}
              >
                {i.name}
              </option>
            ))}
          </select>

看看這個selected={plan.name == i.name}還要注意值更新defaultValue={plan.name}

Answer 23

2022 示例與 Redux 與 useSelector 反應

截至 2022 年，react-select 中有一個 defaultValue 選項。 請注意，如果您使用 getOptionLabel 和 getOptionValue，您需要使您的默認值與您設置的那些選項參數相匹配......

例如

const responder = useSelector((state) => state.responder)



<Select
              name="keyword"
              required={true}
              className="mb-3"
              styles={customStyles}
              components={animatedComponents}
              closeMenuOnSelect={true}
              options={keywords}
              defaultValue={responder ? responder[0]?.responder?.keyword?.map((el) => { return {title: el.title, _id: el._id}}): ""}
              getOptionLabel={({title}) => title}
              getOptionValue={({_id}) => _id}
              onChange={(_id) => setUpload({...upload, keyword: _id})}
              isMulti
              placeholder="select Keywords"
              isSearchable={true}
              errors={errors}
              innerRef={register({
                required: "Add your Keyword"
              })}
            />

而不是用 {label: "this", value: "that} 設置你的 defaultValue

我需要設置我的 defaultValue({title:"this", _id:"that"})

Answer 24

<Input 
  type='select' 
   name='defaultproperty'
   id='propertyselect'      
    >  
                         <option 
                          key={id} 
                          value={item.propertyId}
                          id = {item.propertyName}
                          defaultValue = {orgPropertyId} 
                          selected={item.propertyId === orgPropertyId}
                         >
                          {item.propertyName}
                           </option>  
                ) 
            </Input>

使用 selected 將達到默認值文本的目的

Answer 25

你可以簡單地這樣做：

在 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 中正常使用它。