Як встановити значення за замовчуванням у 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
              });
           }}
/>

Якщо ви прийшли сюди для реакції-вибору v2 і все ще маєте проблеми - версія 2 тепер приймає лише об’єкт як value, defaultValueі т.д.

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

У мене була подібна помилка. Переконайтеся, що ваші параметри мають атрибут value.

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

Потім встановіть відповідність значення елемента selects спочатку до значення параметрів.

<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, тоді найкраще не "розв'язувати" його значенням за замовчуванням select, яке не відображає фактичне значення, замість цього встановіть значення під час ініціалізації об'єкта.

Якщо ви не використовуєте redux-форму, а для змін використовуєте локальний стан, то ваш компонент реакції-вибору може виглядати так:

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. Змініть стан значення параметра за замовчуванням у цій функції обробника події на нуль

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

Я часто використовую щось подібне.

Значення за замовчуванням з реквізитів у цьому прикладі

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