ReactJS按钮在单击时更改颜色

import React, { useState } from 'react';

const Button = () => {
  const [color, setColor] = useState('blue'); // 定义一个颜色状态和更新状态的函数

  const handleClick = () => {
    setColor('red'); // 单击按钮时更新颜色状态为红色
  };

  return (
    <button style={{ backgroundColor: color }} onClick={handleClick}>
      点我更改颜色
    </button>
  );
};

export default Button;

import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <div>
      <h1>React按钮颜色变化示例</h1>
      <Button />
    </div>
  );
};

export default App;