背景颜色根据值变化

问题描述 投票:0回答:1

这是我的 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 进行造型。请帮助我,我被困了:(抱歉英语不好。

reactjs next.js background tailwind-css case
1个回答
0
投票

希望这会有所帮助,

  1. TaskM
    处,您应该删除
    return
    或缺少地图函数内的
    {
    ,因为您使用的是箭头功能。
  2. 你的
    desc
    来自useContext,我假设它是由
    useState
    定义的状态,因为你的选择行为没有更新
    desc
    状态,因此UI不会更新。
  3. 尝试从 useContext 中提取
    setDesc
    或 desc setter 函数,并替换
    useTask
    中 onChange 事件处理程序的
    Modal
© www.soinside.com 2019 - 2024. All rights reserved.