如何从 Select 输入中获取所选值

Question

我尝试使用 onChange 给我选择的选项的值，但我收到错误“TypeError：无法读取未定义的属性'值'”我该怎么办？

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>

    </>
    );

}

Answer 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 handleChange = (selectedOption) => {
    setCategory(selectedOption.value);
    console.log(`Option selected:`, selectedOption);
  };

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

访问查看现场演示： CodeSandbox