如何处理reactjs中具有多个按钮和多个值的状态

dgsult0t  于 2022-12-26  发布在  React
关注(0)|答案(2)|浏览(144)

我创建了一个任务，我们可以在其中选择是或否选项

  • 我有两个按钮是和否。
  • 如果我点击"是"按钮，则"是"按钮的背景颜色变为绿色，"否"按钮的背景颜色变为红色。
  • 如果我点击"否"按钮，则"否"按钮的背景颜色变为绿色，"是"按钮的背景颜色变为红色。
  • 这意味着单击按钮时，单击的按钮变为绿色，未单击的按钮变为红色。
    • 但问题是我为每个按钮创建了单独的状态，这不是一个好的做法。**

有没有别的办法来处理这件事？

  • 这是我的密码 *'
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;

'这里是输出屏幕--

如何编写小而高效的代码。

reactjs

2条答案

按热度按时间
wh6knrhe

wh6knrhe1#

您可以为按钮组创建单独的组件：

按钮.js

import React, { useState } from "react";
import "./Medicine.css";

const Button = () => {
  const [selectedButton, setSelectedButton] = useState("");

  return (
    <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>
  );
};
export default Button;

然后您就可以导入并使用该按钮组件：

医学.js

import React from "react";
import Button from "./Button";
import "./Medicine.css";

const Medicine = () => {
  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>
              <Button />
            </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>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">What are yours symptoms?</div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    How long you had the symptoms?
                  </div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    What action have you already taken?
                  </div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    Are you taking any other medication?
                  </div>
                  <Button />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Medicine;
赞(0）分享  回复(0）举报  2022-12-26
qojgxg4l

qojgxg4l2#

好的，我知道了。我们可以创建状态对象
下面是代码

const Medicine = () => {
  const [selectedButton, setSelectedButton] = useState({
    Button1: "",
    Button2: "",
    Button3: "",
    Button4: "",
    Button5: "",
    Button6: "",
  });
  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.Button1 !== ""
                      ? selectedButton.Button1 === "no"
                        ? "butn greenbtn"
                        : "butn redbtn"
                      : "butn"
                  }
                  onClick={() =>
                    setSelectedButton((prev) => {
                      return { ...prev, Button1: "no" };
                    })
                  }
                >
                  No
                </button>
                <button
                  className={
                    selectedButton.Button1 !== ""
                      ? selectedButton.Button1 === "yes"
                        ? "butn greenbtn"
                        : "butn redbtn"
                      : "butn"
                  }
                  onClick={() =>
                    setSelectedButton((prev) => {
                      return { ...prev, Button1: "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={
                        selectedButton.Button2 !== ""
                          ? selectedButton.Button2 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button2: "no" };
                        })
                      }
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton.Button2 !== ""
                          ? selectedButton.Button2 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button2: "yes" };
                        })
                      }
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">What are yours symptoms?</div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton.Button3 !== ""
                          ? selectedButton.Button3 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button3: "no" };
                        })
                      }
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton.Button3 !== ""
                          ? selectedButton.Button3 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button3: "yes" };
                        })
                      }
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    How long you had the symptoms?
                  </div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton.Button4 !== ""
                          ? selectedButton.Button4 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button4: "no" };
                        })
                      }
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton.Button4 !== ""
                          ? selectedButton.Button4 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button4: "yes" };
                        })
                      }
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    What action have you already taken?
                  </div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton.Button5 !== ""
                          ? selectedButton.Button5 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button5: "no" };
                        })
                      }
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton.Button5 !== ""
                          ? selectedButton.Button5 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button5: "yes" };
                        })
                      }
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    Are you taking any other medication?
                  </div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton.Button6 !== ""
                          ? selectedButton.Button6 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button6: "no" };
                        })
                      }
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton.Button6 !== ""
                          ? selectedButton.Button6 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() =>
                        setSelectedButton((prev) => {
                          return { ...prev, Button6: "yes" };
                        })
                      }
                    >
                      Yes
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Medicine;
赞(0）分享  回复(0）举报  2022-12-26
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com