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

У меня проблема с использованием реакции-select. Я использую редукционную форму, и я сделал свой компонент "реакция-выбор" совместимым с формой редукса. Вот код:

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>

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

Ответы

Ответ 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}
  />
);

Ответ 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
              });
           }}
/>

Ответ 3

Если вы пришли сюда для реакции-выбора v2, но у вас по-прежнему возникают проблемы - версия 2 теперь принимает только объект в качестве value, defaultValue и т.д.

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

Ответ 4

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

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

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

<select 
    value={this.value} />

Ответ 5

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

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

Ответ 6

Если ваши параметры похожи на

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

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

Значение, props.input.value должно быть либо 'one', либо 'two'

Ответ 7

Если вы не используете redux-форму и используете локальное состояние для изменений, тогда ваш компонентact-select может выглядеть следующим образом:

class MySelect extends Component {

constructor() {
    super()
}

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

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

Ответ 8

Расширяя ответ @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.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
};

Ответ 9

Для автоматического выбора значения в выберите.

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

Используйте атрибут value в теге select

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

решение работает на меня.