Как получить выбранное значение из ввода выбора в React

Я попытался использовать onChange, чтобы получить значение выбранного мной варианта и я получаю сообщение об ошибке «TypeError: не удается прочитать значение свойства undefined», что мне делать?

import React, { useState,option } from 'react';
import Select from 'react-select'
export default function Change() {

const [category,setcat]=useState(20);


const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]

return(
    <>
    <Select onChange = {(e)=>{setcat(e.target.value);}} value = {options.value} options = {options} />
  
    <h1>result  = {category}</h1>

    </>
    );

}

Вы используете машинописный текст или javascript?

— 08.04.2021 19:30

Проверьте мой ответ. Удачного кодирования :)

— 08.04.2021 19:41

reactjs react-hooks

08.04.2021 19:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот решение:

import React, { useState } from "react";
import Select from "react-select";

export default function Change() {
  const [category, setCategory] = useState("Not select yet");

  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" }
  ];

  const handleChangeEvent = (selectedOption) => {
    setCategory(selectedOption.value);
    console.info(`Option selected:`, selectedOption);
  };

  return (
    <>
      <Select value = {category} onChange = {handleChangeEvent} options = {options} />
      <h1>result  = {category}</h1>
    </>
  );
}

Посетите, чтобы увидеть живую демонстрацию: CodeSandbox

08.04.2021 19:41