Reactjs 如何动态地改变<； Select >；React和Tailwind元素

import { useState } from "react";

export function Options() {
  const [selectedColor, setSelectedColor] = useState(""); 

  const handleSelectChange = (e) => {
    setSelectedColor(e.target.value);
  };

  return (
      <select
        className={`bg-${selectedColor}-200`}
        onChange={handleSelectChange}
        value={selectedColor}
      >
        <option value="">Select a color</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
      </select>
  );
}

<option value="bg-red-200">Red</option>
<option value="bg-yellow-200">Yellow</option>

  safelist: [
    'bg-red-200',
    'bg-yellow-200'
  ]

Reactjs相关问答推荐

在react中向数组状态添加值时出错

滚动事件监听器在Next.js客户端组件中不触发

使用Ionic 7和React 18，如何访问历史对象以在页面之间导航？

Reaction路由-如何在布局路由内呈现&q；/：id&q；路由

在React中使用映射创建flex组件

当我无法引用模态组件时，如何使模态组件在 Next.js/React 中管理自己的状态？

React useEffect 依赖项

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

修改React数据表扩展组件

useRef 不关注模态

解决在React测试库中的act()警告

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

Select 项目后 Select HeadlessUI 组合框中的所有文本？

为什么 setState 在 React 中不是异步的？

将 ref 转发到所有页面(路由组件)只是为了将其应用于

并具有跳过导航链接(按钮).有没有更好的办法？

如何从 React Redux store 中删除特定项目？

useState 在生命周期中的位置

谁能根据经验提供有关 useEffect 挂钩的更多信息

使用 React 中的功能组件更改另一个组件的状态

当父组件重新渲染时做出react ，我失go 了子状态.我错过了什么？