React -基于来自对象的数据创建复选框

import React, { Component } from 'react';

class Checkbox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
  }

  handleCheckboxChange = () => {
    this.setState(prevState => ({
      checked: !prevState.checked
    }));
  }

  render() {
    const { checked } = this.state;

    return (
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={this.handleCheckboxChange}
        />
        {checked ? '已选中' : '未选中'}
      </label>
    );
  }
}

export default Checkbox;

import React, { Component } from 'react';
import Checkbox from './Checkbox';

class App extends Component {
  render() {
    return (
      <div>
        <h1>复选框示例</h1>
        <Checkbox />
      </div>
    );
  }
}

export default App;