如何创建一个React单选按钮

一个简短的React教程，为初学者提供了关于在React中使用单选按钮的例子。首先，单选按钮只是一个可以在React的JSX中呈现的单选类型的HTML输入域：

import * as React from 'react';

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

export default App;

可能缺少的是一个相关的标签，来告诉用户这个单选按钮改变了什么值：

import * as React from 'react';

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

export default App;

在你的浏览器中，这个单选按钮已经可以改变其选中状态。然而，这只是该单选按钮的内部HTML状态，还没有被React控制。让我们通过把这个单选按钮从不受控的状态转变为受控的状态来改变这个情况。

import * as React from 'react';

const App = () => {
  const [value, setValue] = React.useState(false);

  const handleChange = () => {
    setValue(!value);
  };

  return (
    <div>
      <label>
        <input type="radio" checked={value} onChange={handleChange} />
        Cat
      </label>
    </div>
  );
};

export default App;

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

import * as React from 'react';

const App = () => {
  const [value, setValue] = React.useState(false);

  const handleChange = () => {
    setValue(!value);
  };

  return (
    <div>
      <RadioButton
        label="Cat"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

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

export default App;

我们的Radio Button组件现在是一个可重复使用的组件。例如，如果你在React中给你的输入字段一些CSS样式，那么在你的React项目中使用的每个Radio Button组件都会使用同样的样式。

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

import * as React from 'react';

const App = () => {
  const [catPerson, setCatPerson] = React.useState(false);
  const [dogPerson, setDogPerson] = React.useState(false);

  const handleCatChange = () => {
    setCatPerson(!catPerson);
  };

  const handleDogChange = () => {
    setDogPerson(!dogPerson);
  };

  return (
    <div>
      <RadioButton
        label="Cat"
        value={catPerson}
        onChange={handleCatChange}
      />
      <RadioButton
        label="Dog"
        value={dogPerson}
        onChange={handleDogChange}
      />
    </div>
  );
};

export default App;

如果你想强制规定只有一个单选按钮可以被选中，你需要用下面的方法来改变它：

import * as React from 'react';

const App = () => {
  const [favorite, setFavorite] = React.useState('dog');

  const handleCatChange = () => {
    setFavorite('cat');
  };

  const handleDogChange = () => {
    setFavorite('dog');
  };

  return (
    <div>
      <RadioButton
        label="Cat"
        value={favorite === 'cat'}
        onChange={handleCatChange}
      />
      <RadioButton
        label="Dog"
        value={favorite === 'dog'}
        onChange={handleDogChange}
      />
    </div>
  );
};

export default App;

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