React - выберите компонент с аналогичным API, что и элемент выбора HTML5

Обновите свое состояние

Обновите свое состояние, чтобы selectedOption был равен null. Ваше состояние должно выглядеть так:

state = {
  selectedOption: null, 
}; 

Создайте функцию handleChangeEvent

Создайте функцию, которая будет обрабатывать изменение, когда пользователь изменяет свой параметр, и соответствующим образом обновлять состояние.

handleChangeEvent = selectedOption => {
   this.setState({ selectedOption }); //this sets selectedOption to an object containing the value and input of the selection
   //if you want to get the value and the input and store those in separate variables you can do this
   const labelValue = selectedOption.label // this gets whatever label you assigned to labelValue
   const valueOfOption = selectedOption.value //this gets the value of the option and assigns it to valueOfOption  
}

Очевидно, вы можете обновить переменные state вместо создания экземпляров двух новых переменных (labelValue и valueOfOption).

Обновить функцию рендеринга

Обновите свою функцию рендеринга, чтобы вызвать изменение дескриптора при изменении. Обновите ваш текущий источник. Вот это у вас:

<Option onClick = {this.props.select()}>

Кстати, эта функция select() будет вызываться таким образом независимо от щелчка. Правильный способ сделать это: onClick = {() => this.props.select()}.

Вы бы хотели этого:

<Option onClick = {this.handleChangeEvent}> //should this be onChange? not sure how your Option component is set up though

Теперь, если ваша функция select() является функцией, переданной через props (что, похоже, так), вам необходимо обработать selectedOption в вашем родительском компоненте. Вы не поделились большой информацией о своем родительском компоненте, поэтому я проигнорировал функцию select() и создал handleChangeEvent().

Собрав все это вместе, у вас должно получиться что-то вроде этого:

//necessary imports

class Select extends Component {
   state = {
     selectedOption: null, 
   } 

   handleChangeEvent = selectedOption => {
      this.setState({ selectedOption }); 
      const labelValue = selectedOption.label; 
      const valueOfOption = selectedOption.value; 
   } 

   render() {
     const { selectedOption } = this.state; 
     return (
       <div>
         <Option value = {selectedOption} onClick = {this.handleChangeEvent} />
       </div>
     )
   }
} 
export default Select;

Это должно быть так.

Дополнительная помощь

Есть пара пакетов реагирования, которые делают всю эту работу за вас. Я бы посоветовал изучить их, чтобы вам не пришлось изобретать велосипед. Первое, что приходит на ум, - это React Select v2. Вы можете посетить сайт здесь (необработанная ссылка: https://react-select.com/home). Я бы посоветовал просмотреть примеры и документацию.

Установка для React Select: npm i react-select или yarn add react-select .

Есть и другие, такие как rc-select или react-virtualized-select и другие. Вы можете изучить их и увидеть, какой из них лучше всего подходит для ваших нужд, или просто продолжить разработку своего собственного.

Надеюсь это поможет.

В итоге я установил начальное состояние родителя в componentDidMount родителя следующим образом:

componentDidMount() {
const { children } = this.props;
let selectedOption = null;
// check if child elements have a 'selected' attribute and set state based on it
React.Children.map(children, (child, index) => {
  if (child.props.selected) {
    selectedOption = index;
  }
});

this.setState({ selectedOption });

}