这是我的 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 进行造型。请帮助我,我被困了:(抱歉英语不好。
希望这会有所帮助,
TaskM
处,您应该删除 return
或缺少地图函数内的 {
,因为您使用的是箭头功能。desc
来自useContext,我假设它是由useState
定义的状态,因为你的选择行为没有更新desc
状态,因此UI不会更新。setDesc
或 desc setter 函数,并替换 useTask
中 onChange 事件处理程序的 Modal
。