React Js中的复选框和状态

import React, { useState } from 'react';

function CheckboxExample() {
  // 或者使用类组件：class CheckboxExample extends React.Component {}
  
  // 创建一个状态来跟踪复选框的选中状态，默认为未选中
  const [isChecked, setIsChecked] = useState(false);
  
  // 或者在类组件中使用：this.state = { isChecked: false };
  
  // 创建一个处理复选框变化的函数
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  }
  
  // 或者在类组件中使用：handleCheckboxChange = () => { this.setState({ isChecked: !this.state.isChecked }); }
  
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        选中状态：{isChecked ? '已选中' : '未选中'}
      </label>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>React复选框示例</h1>
      <CheckboxExample />
    </div>
  );
}