材料-顺风 选择选项

Question

我在Next.JS应用程序中使用@material-tailwind/react。我从此处的示例中获取了以下代码： https: //www.material-tailwind.com/docs/react/select。在 React 中，我可以在 Select 上使用 onChange 函数，然后获取所选项目的值，例如“e.target.value”。它如何与这个组件一起工作？

import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="w-72">
      <Select label="Select Version">
        <Option>Material Tailwind HTML</Option>
        <Option>Material Tailwind React</Option>
        <Option>Material Tailwind Vue</Option>
        <Option>Material Tailwind Angular</Option>
        <Option>Material Tailwind Svelte</Option>
      </Select>
    </div>
  );
}

Answer 1

我花了近 3 个小时才解决这个简单的解决方案...希望可能需要这个答案的人可以找到它...GD 保佑

<Select label="Select Bible" id="bible_type" className="text-white text-xs" selected={(element) =>
   {
    if (element) {
      const selectedValue = element.props.value;
      console.log('Selected Value:', selectedValue);
    return element.props.name;
    }

  }
    }>
       {this.state.options.map((option) => (
            <Option   key={option.id} value={option.value} data-id={option.id} name={option.label}>
              {option.label}
            </Option>
          ))}
      </Select>