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

У меня проблема с использованием response-select. Я использую форму redux, и я сделал свой компонент выбора реакции совместимым с формой 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>

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

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

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

Я использовал параметр defaultValue, ниже приведен код, как я достиг значения по умолчанию, а также обновляю значение по умолчанию, когда параметр выбирается из раскрывающегося списка.

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

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

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

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

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

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

<select 
    value={this.value} />

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

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

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

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

class MySelect extends Component {

constructor() {
    super()
}

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

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

Используйте реквизиты defaultInputValue следующим образом:

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

          

для получения дополнительной информации https://www.npmjs.com/package/react-select

Если ваши варианты такие

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

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

Значение 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>

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

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

Я часто использую что-то подобное.

Значение по умолчанию из 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> 
}

Вам нужно делать глубокий поиск, если вы используете группы в опциях:

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