如何使用React JS中的按钮onClick更改按钮内的背景和文本颜色

在React JS中，可以使用onClick事件来更改按钮内的背景和文本颜色。下面是一个示例代码：

import React, { useState } from 'react';

const Button = () => {
  const [backgroundColor, setBackgroundColor] = useState('white');
  const [textColor, setTextColor] = useState('black');

  const handleClick = () => {
    if (backgroundColor === 'white') {
      setBackgroundColor('blue');
      setTextColor('white');
    } else {
      setBackgroundColor('white');
      setTextColor('black');
    }
  };

  return (
    <button
      style={{ backgroundColor: backgroundColor, color: textColor }}
      onClick={handleClick}
    >
      Click me
    </button>
  );
};

export default Button;

在上面的代码中，我们使用了React的useState钩子来管理按钮的背景颜色和文本颜色。初始状态下，背景颜色为白色，文本颜色为黑色。

当按钮被点击时，handleClick函数会被调用。在函数内部，我们检查当前的背景颜色，如果是白色，则将背景颜色设置为蓝色，文本颜色设置为白色；如果不是白色，则将背景颜色设置为白色，文本颜色设置为黑色。

最后，我们使用style属性将背景颜色和文本颜色应用到按钮上，并将handleClick函数绑定到按钮的onClick事件上。

这样，当按钮被点击时，按钮的背景颜色和文本颜色会相应地改变。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm