如何创建一个React复选框（详细教程）

一个简短的React教程，通过实例向初学者介绍在React中使用复选框。首先，复选框只是一个HTML输入框，其类型为复选框，可以在React的JSX中呈现：

import * as React from 'react';

const App = () => {
  return (
    <div>
      <input type="checkbox" />
    </div>
  );
};

export default App;

可能缺少的是一个相关的标签，以提示用户这个复选框改变了什么值：

import * as React from 'react';

const App = () => {
  return (
    <div>
      <label>
        <input type="checkbox" />
        My Value
      </label>
    </div>
  );
};

export default App;

在你的浏览器中，这个复选框已经可以通过显示一个复选标记或什么都不显示来改变其复选状态。然而，这只是该复选框的内部HTML状态，还没有被React控制。让我们通过把这个复选框从不受控制转变为受控制来改变这个情况。

import * as React from 'react';

const App = () => {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked(!checked);
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={handleChange}
        />
        My Value
      </label>

      <p>Is "My Value" checked? {checked.toString()}</p>
    </div>
  );
};

export default App;

通过使用React的useState Hook和一个事件处理程序，我们可以通过React的状态来跟踪检查框的值。接下来我们可能想创建一个可以在整个React项目中多次使用的Checkbox组件。因此，我们将提取它作为一个新的函数组件，并将必要的道具传递给它。

import * as React from 'react';

const App = () => {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked(!checked);
  };

  return (
    <div>
      <Checkbox
        label="My Value"
        value={checked}
        onChange={handleChange}
      />

      <p>Is "My Value" checked? {checked.toString()}</p>
    </div>
  );
};

const Checkbox = ({ label, value, onChange }) => {
  return (
    <label>
      <input type="checkbox" checked={value} onChange={onChange} />
      {label}
    </label>
  );
};

export default App;

我们的Checkbox组件现在是一个可重复使用的组件。例如，如果你在React中给你的输入元素一些CSS样式，在你的React项目中使用的每个Checkbox组件都会使用相同的样式。

如果你现在想创建一个复选框组，你可以只使用多个复选框组件并排使用，也许用一些边框和一些对齐方式，这样用户就会觉得它们是一组复选框。

import * as React from 'react';

const App = () => {
  const [checkedOne, setCheckedOne] = React.useState(false);
  const [checkedTwo, setCheckedTwo] = React.useState(false);

  const handleChangeOne = () => {
    setCheckedOne(!checkedOne);
  };

  const handleChangeTwo = () => {
    setCheckedTwo(!checkedTwo);
  };

  return (
    <div>
      <Checkbox
        label="Value 1"
        value={checkedOne}
        onChange={handleChangeOne}
      />
      <Checkbox
        label="Value 2"
        value={checkedTwo}
        onChange={handleChangeTwo}
      />
    </div>
  );
};

export default App;

这就是在React中创建Checkbox组件的方法。如果你是React的初学者，我希望这个教程能帮助你理解一些概念和模式