如何改变reactjs中单击两个按钮时不同的背景颜色？

5lwkijsr 于 2022-12-22 发布在 React

关注(0)|答案(2)|浏览(340)

有一些客观问题的答案是"是"或"否"

我有两个按钮是和否。
如果我点击"是"按钮，则"是"按钮的背景颜色变为绿色，"否"按钮的背景颜色变为红色。
如果我点击"否"按钮，则"否"按钮的背景颜色变为绿色，"是"按钮的背景颜色变为红色。

这意味着单击按钮时，单击的按钮变为绿色，未单击的按钮变为红色。

<div className="fcontainer">
    <div className="fitem">
    Did You come into the pharmacy today for Medicine?
    </div>
    <div className="fitem">
     <button> No</button>
     <button>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="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">What are yours symptoms?</div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">
                How long you had the symptoms?
              </div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">
                What action have you already taken?
              </div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">
                Are you taking any other medication?
              </div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
          </div>
        </div>

this is outputscreen：

我是React的新手，正处于学习阶段，需要您的帮助。
谢谢你。

reactjs

来源：https://stackoverflow.com/questions/74888069/how-to-change-different-background-color-of-two-buttons-on-single-click-in-react

2条答案

按热度按时间

nbysray51#

你可以先创建一个空字符串的状态，一旦你点击按钮，就用yes或no更新状态，并在你的返回中使用那个状态。
在下面的例子中，我添加了样式属性，你也可以用同样的逻辑用class来改变它。

import { useState } from "react";

const App = () => {
  const [selectedButton, setSelectedButton] = useState("");
  return (
    <>
      <button style={selectedButton !== "" ? { backgroundColor: selectedButton === "yes" ? "green" : "red"} : { backgroundColor: "grey"}} onClick={() => setSelectedButton("yes")}>Yes</button>
      <button style={selectedButton !== "" ? { backgroundColor: selectedButton === "no" ? "green" : "red"} : { backgroundColor: "grey" }} onClick={() => setSelectedButton("no")}>No</button>
    </>
  )
}

export default App;

如果状态为空，则填充灰色，如果有值，则根据您的条件填充不同的颜色。
建议：使用类而不是样式总是更好的。

赞(0）回复(0）举报 2022-12-22

xfb7svmp2#

您可以使用useState来跟踪一些东西（例如，哪些按钮被单击了）
例如，null表示没有单击任何内容，然后一个布尔值表示yes/no答案。

import React from "react";
import "./styles.css";

export default function App() {
  const [needMedicine, setNeedMedicine] = React.useState(null);
  const getYesBackgroundColor = () => {
    if (needMedicine === null) {
      return null;
    }

    return needMedicine ? "green" : "red";
  };

  const getNoBackgroundColor = () => {
    if (needMedicine === null) {
      return null;
    }

    return needMedicine ? "red" : "green";
  };

  return (
    <div className="fcontainer">
      <div className="fitem">
        Did You come into the pharmacy today for Medicine?
      </div>
      <div className="fitem">
        <button
          onClick={() => setNeedMedicine(false)}
          style={{ backgroundColor: getNoBackgroundColor() }}
        >
          No
        </button>
        <button
          onClick={() => setNeedMedicine(true)}
          style={{ backgroundColor: getYesBackgroundColor() }}
        >
          Yes
        </button>
      </div>
    </div>
  );
}

此外，您可能需要考虑使用复选框（多选）、单选按钮（单选）或切换按钮（开/关、真/假等）或类似的功能。People often like to have the type of question fit a standardised type of input controller.

赞(0）回复(0）举报 2022-12-22

我来回答

如何改变reactjs中单击两个按钮时不同的背景颜色？

2条答案

相关问题

热门标签

最新问答