背景颜色根据值变化

Question

这是我的 Post 组件。当我添加帖子标题时，必须根据我的Selected具有不同的背景颜色。我尝试了很多事情，但我的大脑不工作。

const TaskM = () => {
const { myapp,handleRemoveTodo,desc,handleAddTodo } = useContext(Context);

let bgColor ='';

switch (desc) {
    case 'Banner':
        bgColor = 'bg-red-500'
        break;
    
    case 'Illustration':
        bgColor='bg-yellow-500'
        break;

    case 'Video':
        bgColor ='bg-blue-500'
        break;
    case 'UI UX':
        bgColor= 'bg-cyan-500'
}

return (
    <div className='flex flex-col  '>
        <ul className="todo-list">
            {(myapp || [])?.map((blog: any, index: number) => 
                    return <>
                        <div className='bg-white rounded-2xl flex '>
                            <div className='flex flex-row mt-2 justify-between w-[90%] '>
                                <h1 className='text-black w-[90%] '>
                                    <li className=' text-gray-700 md:break-words w-[90%] mb-3 flex flex-row text-xs justify-between items-center rounded-lg' id={blog.title} key={index}>
                                        {blog.title}
                                        {/* {JSON.stringify(_cards)} */}
                                    </li>
                                </h1>
                                <button " onClick={() => handleRemoveTodo(index)}>
                                    <BsThreeDots />
                                </button>
                            </div>
                            <div className='w-full'>
                            <li className={`${bgColor}`} id={blog.desc} key={index}>
                                {blog.desc}
                            </li>
                            </div>
                            
                        </div>

                    </>;
                

            }

            )}

        </ul>
    </div>
)

}

这是我的选择和选项

<Modal show={openModal} onClose={onCloseModal} size="md" popup>
                        <div className="space-y-6">
                            <div className="text-xl font-medium text-gray-900 dark:text-white">
                            
                            </div>
                            <div className="max-w-md">
                                <div className="mb-2 block">
                                    <Label htmlFor="countries" value="Select your country" />
                                </div>
                                <Select
                                    id="countries"
                                    required
                                    onChange={(e) => setTask(e.target.value)}
                                >
                                    <option >Banner</option>
                                    <option >Illustration</option>
                                    <option >Video</option>
                                    <option >UI UX</option>
                                </Select>
                            </div>
                            


                            <form method="dialog" className='flex flex-row  gap-2'>
                                <button 
                                    onClick={() => {
                                        setOpenModal(false)
                                        handleAddTodo()
                                    }}>Add</button>
                                <button onClick={onCloseModal}>Close</button>
                            </form>
                        </div>
                </Modal>

我是初学者，我不知道我做错了什么。我使用 Nextjs 和 tailwind 进行造型。请帮助我，我被困了:(抱歉英语不好。

Answer 1

希望这会有所帮助，

1. 在

   TaskM

   处，您应该删除

   return

   或缺少地图函数内的

   {

   ，因为您使用的是箭头功能。
2. 你的

   desc

   来自useContext，我假设它是由

   useState

   定义的状态，因为你的选择行为没有更新

   desc

   状态，因此UI不会更新。
3. 尝试从 useContext 中提取

   setDesc

   或 desc setter 函数，并替换

   useTask

   中 onChange 事件处理程序的

   Modal

   。