1.将本地状态设置为true或false。
1.设置一个处理程序在true和false之间切换状态。
1.使用状态确定背景颜色应该是什么。这里我在className属性中使用了conditional/ternary operator来在蓝色和红色类之间切换。
实现细节可能与您的用例不同，因为您可能使用CSS模块或样式化组件，例如，但它通常会遵循此模式。

const { useState } = React;

function Button() {

  // Initialise local state
  const [ clicked, setClicked ] = useState(false);

  // Toggle the state between true/false
  function handleClick() {
    setClicked(prev => !prev);
  }

  // Use a conditional operator to choose what
  // colour to render based on the state
  return (
    <button
      className={clicked ? 'red' : 'blue'}
      onClick={handleClick}
    >Click me
    </button>
  );

}

ReactDOM.render(
  <Button />,
  document.getElementById('react')
);

.red { background-color: red; }
.blue { background-color: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

要在单击和取消单击时更改按钮的背景颜色，可以使用JavaScript向按钮添加事件侦听器，并使用style.backgroundColor属性更改其背景颜色。下面是一个例子，它在单击时将按钮的背景颜色更改为红色，在取消单击时将其更改为默认颜色：

const button = document.querySelector('#myButton');
const defaultColor = button.style.backgroundColor;

button.addEventListener('click', () => {
  button.style.backgroundColor = 'red';
});

button.addEventListener('mouseup', () => {
  button.style.backgroundColor = defaultColor;
});

在本例中，首先使用querySelector()选择按钮。然后定义一个变量defaultColor来存储其初始背景色。接下来，为click事件添加一个事件侦听器，将其背景颜色更改为红色。最后，为mouseup事件添加一个事件侦听器，将其背景颜色更改回默认颜色。您可以更改此示例中的颜色和事件类型以满足您的需要。