[Series] Các mẫu thiết kế component trong React – Phần 1: Xây dựng 1 Checkbox component

Kiếm Phong

Khởi tạo CheckBox component với

  • checked: boolean – dùng để kiểm tra trạng thái của CheckBox đã được tick hay không
  • onCheck: function – gọi hàm setState để cập nhật trạng thái của CheckBox mỗi khi CheckBox được click
import React from "react";
import ReactDOM from "react-dom";

import { Input } from "reactstrap";

import "./styles.css";

class CheckBox extends React.Component {
  state = {
    checked: true
  };
  onCheck = () =>
    this.setState(
      ({ checked }) => ({ checked: !checked }),
      () => this.props.handleCheck(this.state.checked)
    );

  render() {
    return (
      <Input
        type="checkbox"
        checked={this.state.checked}
        onClick={this.onCheck}
      />
    );
  }
}

function App() {
  function handleCheck(...args) {
    console.log("handleCheck", ...args);
  }
  return <CheckBox handleCheck={handleCheck} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);