我创建了一个任务,我们可以在其中选择是或否选项
- 我有两个按钮是和否。
- 如果我点击"是"按钮,则"是"按钮的背景颜色变为绿色,"否"按钮的背景颜色变为红色。
- 如果我点击"否"按钮,则"否"按钮的背景颜色变为绿色,"是"按钮的背景颜色变为红色。
- 这意味着单击按钮时,单击的按钮变为绿色,未单击的按钮变为红色。
- 但问题是我为每个按钮创建了单独的状态,这不是一个好的做法。**
有没有别的办法来处理这件事?
- 这是我的密码 *'
import React, { useState } from "react";
import "./Medicine.css";
const Medicine = () => {
const [selectedButton, setSelectedButton] = useState("");
const [selectedButton1, setSelectedButton1] = useState("");
const [selectedButton2, setSelectedButton2] = useState("");
const [selectedButton3, setSelectedButton3] = useState("");
const [selectedButton4, setSelectedButton4] = useState("");
const [selectedButton5, setSelectedButton5] = useState("");
return (
<>
<h1>Medicine</h1>
<div className="parent_div">
<div className="child_div">
<p>page2</p>
<div className="grand_div">
<div className="fcontainer">
<div className="fitem">
Did You come into the pharmacy today for Medicine?
</div>
<div className="fitem">
<button
className={
selectedButton !== ""
? selectedButton === "no"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton("no")}
>
No
</button>
<button
className={
selectedButton !== ""
? selectedButton === "yes"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton("yes")}
>
Yes
</button>
</div>
</div>
<hr />
<div>
<h5>Where do you asked any of the following:</h5>
<div style={{ marginTop: "10px" }}>
<div className="fcontainer">
<div className="fitem ques">Who is the Medicine for?</div>
<div className="fitem ">
<button
className={
selectedButton1 !== ""
? selectedButton1 === "no"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton1("no")}
>
No
</button>
<button
className={
selectedButton1 !== ""
? selectedButton1 === "yes"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton1("yes")}
>
Yes
</button>
</div>
</div>
<div className="fcontainer">
<div className="fitem ques">What are yours symptoms?</div>
<div className="fitem">
<button
className={
selectedButton2 !== ""
? selectedButton2 === "no"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton2("no")}
>
No
</button>
<button
className={
selectedButton2 !== ""
? selectedButton2 === "yes"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton2("yes")}
>
Yes
</button>
</div>
</div>
<div className="fcontainer">
<div className="fitem ques">
How long you had the symptoms?
</div>
<div className="fitem">
<button
className={
selectedButton3 !== ""
? selectedButton3 === "no"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton3("no")}
>
No
</button>
<button
className={
selectedButton3 !== ""
? selectedButton3 === "yes"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton3("yes")}
>
Yes
</button>
</div>
</div>
<div className="fcontainer">
<div className="fitem ques">
What action have you already taken?
</div>
<div className="fitem">
<button
className={
selectedButton4 !== ""
? selectedButton4 === "no"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton4("no")}
>
No
</button>
<button
className={
selectedButton4 !== ""
? selectedButton4 === "yes"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton4("yes")}
>
Yes
</button>
</div>
</div>
<div className="fcontainer">
<div className="fitem ques">
Are you taking any other medication?
</div>
<div className="fitem">
<button
className={
selectedButton5 !== ""
? selectedButton5 === "no"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton5("no")}
>
No
</button>
<button
className={
selectedButton5 !== ""
? selectedButton5 === "yes"
? "butn greenbtn"
: "butn redbtn"
: "butn"
}
onClick={() => setSelectedButton5("yes")}
>
Yes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Medicine;
'这里是输出屏幕--
如何编写小而高效的代码。
2条答案
按热度按时间wh6knrhe1#
您可以为按钮组创建单独的组件:
按钮.js
然后您就可以导入并使用该按钮组件:
医学.js
qojgxg4l2#
好的,我知道了。我们可以创建状态对象
下面是代码