如何更改单击时的按钮颜色？

Question

我正在使用javascript 和react-js 尝试将单击“排除”按钮的颜色从白色更改为红色。如果我再次单击它，我希望它变回白色。我在按钮标签中执行此操作并尝试使用useState。我包含了 app.js 文件和 app.css 文件。我无法让它工作。请帮忙！

function App() {
  const classes = useStyles()

  const [prev, changeColor] = useState(1)

  return (
    <div className="App">
      <header className="App-header">
        <Box
          sx={{
            display: 'grid',
            gap: 1,
            gridTemplateColumns: 'repeat(2, 1fr)',
            gridTemplateRows: 'auto',
            gridTemplateAreas: `"header header header header"
      "main main . sidebar"
      "footer footer footer footer"`
          }}
        >
          <Grid container spacing={12}>
            <Grid item md={12}>
              <Paper className=" "> Tag </Paper>
            </Grid>

            <Grid item xs={6} md={8}>
              <Box
                className={clsx(classes.containerBox, classes.containerBox)}
              ></Box>

              <Button
                id="excluded"
                onClick={() => changeColor(prev => (prev === 1 ? 0 : 1))}
                href="# "
                variant="contained"
                size="medium"
                style={{
                  fontSize: 20
                  //backgroundColor: bg ===1 ? "white" : "red"
                }}
                color="tertiary"
              >
                Exclude
              </Button>
            </Grid>
          </Grid>
        </Box>
      </header>
    </div>
  )
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: grey;
  border-radius: 5px;
}

Answer 1

它没有改变，因为您只是将值分配给 prev 而不是使用 prev 值。

在onClick 你可以这样做，

onClick = {() => changeColor(!prev)}

在风格上，使用prev状态变量

style = {{
       fontSize: 20,
       backgroundColor: prev === 1 ? "white" : "red"
}}

Answer 2

useEffect 是一个查看页面重新呈现的功能。因此，当您使用 changeColor 功能时，页面会重新呈现，因此您可以将您的 App.js 编辑为此

import React, {useEffect,useState} from 'react';

function App() {
 const classes = useStyles();

 const [prev, changeColor] = useState(1);

 useEffect(() => {
   if (prev === 0) {
     document.getElementById('excluded').classList.remove('color2');
     document.getElementById('excluded').classList.add('color1');
   } else {
     document.getElementById('excluded').classList.remove('color1');
     document.getElementById('excluded').classList.add('color2');
   }
 }, [prev]) // the state you are watching to change

 return (
   <div className="App">

     <header className="App-header">
     <Box
     sx={{
       display: 'grid',
       gap: 1,
       gridTemplateColumns: 'repeat(2, 1fr)',
       gridTemplateRows: 'auto',
       gridTemplateAreas:  `"header header header header"
"main main . sidebar"
"footer footer footer footer"`,
     }}
   >


     <Grid container spacing = {12}>

     <Grid item md = {12}>
     <Paper className = " "> Tag </Paper>

     </Grid>

           <Grid item xs = {6} md = {8}>


         <Box className = {clsx(classes.containerBox, classes.containerBox)}>

         </Box>

         <Button
         id = "excluded"
         onClick = { () => changeColor(prev => prev === 1 ? 0 : 1)}
         class="color2"
         href = '# '
         variant = "contained"

         size = "medium"
         style = {{
           fontSize: 20,
           //backgroundColor: bg ===1 ? "white" : "red"
         }}
           color = "tertiary">
           Exclude

         </Button>

         </Grid>

         </Grid>

或者你可以添加一个函数来改变点击颜色。

function App() {
 const classes = useStyles();

 const changeColor = (e) => {
   if (e.target.classList.contains('color2') {
     e.target.classList.remove('color2');
     e.target.classList.remove('color1');
   } else {
     e.target.classList.remove('color1');
     e.target.classList.remove('color2');
   }
 }
 
 return (
   <div className="App">

     <header className="App-header">
     <Box
     sx={{
       display: 'grid',
       gap: 1,
       gridTemplateColumns: 'repeat(2, 1fr)',
       gridTemplateRows: 'auto',
       gridTemplateAreas:  `"header header header header"
"main main . sidebar"
"footer footer footer footer"`,
     }}
   >


     <Grid container spacing = {12}>

     <Grid item md = {12}>
     <Paper className = " "> Tag </Paper>

     </Grid>

           <Grid item xs = {6} md = {8}>


         <Box className = {clsx(classes.containerBox, classes.containerBox)}>

         </Box>

         <Button
         id = "excluded"
         onClick = {changeColor}
         href = '# '
         class = "class2"
         variant = "contained"

         size = "medium"
         style = {{
           fontSize: 20,
           //backgroundColor: bg ===1 ? "white" : "red"
         }}
           color = "tertiary">
           Exclude

         </Button>

         </Grid>

         </Grid>

Answer 3

您可以在这里采取多种方法。请回顾 JS 和 React 的核心概念。

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

const App = () => {
  const [color, setColor] = React.useState("red");
  return (
    <div className="App">
      <button
        style={{ backgroundColor: color }}
        onClick={() => {
          setColor(color === "red" ? "blue" : "red");
        }}
      >
        Click me
      </button>
    </div>
  );
};

export default App;

codesandbox