react 行内设置button点击后的背景颜色

你可以通过在 `style` 属性中设置 `backgroundColor` 来设置按钮在点击后的背景颜色，如下所示：

<button style={{ backgroundColor: 'red' }} onClick={handleClick}>
  Click me
</button>

这样，当按钮被点击时，它的背景颜色将变为红色。你可以将 `'red'` 替换为你想要的任何颜色值。

相关问题

react 行内设置button active

你可以使用 `className` 和 CSS 来实现行内设置 `button` 的 `active` 状态。例如：

<button className="active" onClick={handleClick}>
  Click me
</button>

<style>
  .active {
    background-color: blue;
    color: white;
  }
  
  .active:focus,
  .active:hover {
    background-color: darkblue;
  }
</style>

当你点击这个按钮时，按钮的背景颜色和文本颜色将会变为蓝色。同时，当你将鼠标移动到按钮上或者将按钮聚焦时，按钮的背景颜色也会变为深蓝色。

antd 中button 点击后颜色改变

你可以通过设置 Button 的属性 `style` 或 `className` 来改变 Button 点击后的样式。以下是一些示例代码：

import React, { useState } from 'react';
import { Button } from 'antd';

function MyButton() {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(!clicked);
  };

  return (
    <Button
      style={{ backgroundColor: clicked ? 'red' : 'green' }}
      onClick={handleClick}
    >
      {clicked ? 'Clicked' : 'Click me'}
    </Button>
  );
}

在上述代码中，我们使用了 `useState` hook 来保存 Button 是否被点击的状态。当 Button 被点击时，我们通过 `setClicked` 函数来更新 `clicked` 的值，然后根据 `clicked` 的值来设置 Button 的背景颜色。

你还可以使用自定义 CSS 类来设置 Button 的样式。例如：

<Button className={clicked ? 'clicked' : 'unclicked'} onClick={handleClick}>
  {clicked ? 'Clicked' : 'Click me'}
</Button>

// CSS
.clicked {
  background-color: red;
}

.unclicked {
  background-color: green;
}

以上是两种常见的方法，你可以根据自己的需要来选择。