Как установить значение по умолчанию в react-select

у меня проблема с использованием 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>

но проблема в том, что мой раскрывающийся список не имеет значения по умолчанию, как я хочу. Что я делаю не так? Есть идеи?

11
default-value react-select reactjs

7 ответов

Я думаю, вам нужно что-то вроде этого:

const MySelect = props => (
<Select
    {...props}
    value={props.input.value?props.input.value:"Any"}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
    selectedValue={props.selectedValue}
  />
);
11

у меня была аналогичная ошибка. Убедитесь, что параметры имеют значение атрибута.

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

затем сначала сопоставьте значение элемента selects со значением options.

<select 
    value={this.value} />
6

Я просто прошел через это сам и решил установить значение по умолчанию в функции init редуктора.

Если вы связываете свой выбор с redux, то лучше не "де-связывать" его со значением по умолчанию select, которое не представляет фактического значения, вместо этого установите значение при инициализации объекта.

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

если ваши варианты, как это

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

код {props.input.value} должен соответствовать одному из 'value' в своем {props.options}

смысл.props.input.value должно быть 'one' или 'two'

1

если вы пришли сюда для react-select v2 и все еще испытываете проблемы-версия 2 теперь принимает объект только как value, defaultValue, etc.

то есть, попробуйте использовать value={{value: 'one', label: 'One'}}, вместо value={'one'}.

1

Если вы не используете redux-form и используете локальное состояние для изменений, то ваш компонент react-select может выглядеть так:

class MySelect extends Component {

constructor() {
    super()
}

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

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