Блог

Я новичок в React. Я использую react-select и использовал следующий код. Отображается выпадающий список, но я не могу видеть имена и не могу просмотреть их после выбора.

 <Select
  variant="outlined"
  margin="normal"
  fullWidth
  value={this.state.selected}
  options={RewardAutomationsList}
  name="selected"
  onChange={this.handleChange}
  placeholder='None'
>
  {RewardAutomationsList.map((option) => (
    <option key={option.id} value ={option.name} label={option.name}>
      {option.name}
    </option>
  ))}
</Select>
 

 handleChange = event => {
  this.setState({
    selected: event.name
  });
};
 

RewardAutomationsList Выглядит так:

 RewardAutomationsList:
  0:{name: "TEST 1 (INR 100)", id: "123"}
  1:{name: "test 2 (INR 250)", id: "456"}
 

Кто-нибудь может помочь с этим?

тот же пакет npm используется, что и этот блочный код.

  import React, { Component } from 'react'
    import Select from 'react-select'
    
    const options = [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' }
    ]
    
    const MyComponent = () => (
      <Select options={options} />
    )
 

react-select принимает массив объектов, имеющих label value ключи и. Ваш параметр отображается в RewardAutomationsList have id и name keys, поэтому он не может быть отображен. Вам нужно их изменить.

Кроме того, когда вы подписываетесь на события изменения с react-select помощью ‘s onChange prop, функция обратного вызова, которую вы предоставляете, получает selectedOption , а не event .

Должно работать следующее:

 const RewardAutomationsList = [
  { label: "TEST 1 (INR 100)", value: "123" },
  { label: "test 2 (INR 250)", value: "456" },
];

class App extends React.Component {
  state = {
    selected: null,
  }

  handleChange = (selectedOption) => {
    this.setState({
      selected: selectedOption,
    });
  };

  render() {
    return (
      <React.Fragment>
        <Select
          fullWidth
          margin="normal"
          name="selected"
          onChange={this.handleChange}
          options={RewardAutomationsList}
          placeholder="None"
          value={this.state.selected}
          variant="outlined"
        />
        {/* It's not necessary and it's only here to show the current state */}
        <pre>{JSON.stringify(this.state, null, 2)}</pre>
      </React.Fragment>
    );
  }
}