React打造Radio，探索单选之美

了解Radio

Radio 单选框是一种表单元素，允许用户在多个选项中选择一个。它通常用于收集用户偏好、意见或其他需要单一答案的问题。

使用React创建Radio

为了使用React创建Radio，我们需要使用<input type="radio">元素。这个元素可以接受各种属性，包括：

• name： 指定单选框的名称。具有相同名称的单选框属于同一组，因此用户只能从该组中选择一个选项。
• value： 指定单选框的值。当用户选择该选项时，该值将被提交到服务器。
• checked： 指定单选框是否被选中。如果该属性被设置为true，则该选项将被选中。
• onChange： 指定当单选框被选中或取消选中时触发的函数。

示例

以下是一个使用React创建Radio单选框组件的示例：

import React, { useState } from "react";

function Radio() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input
        type="radio"
        name="gender"
        value="male"
        checked={value === "male"}
        onChange={handleChange}
      />
      Male
      <input
        type="radio"
        name="gender"
        value="female"
        checked={value === "female"}
        onChange={handleChange}
      />
      Female
      <input
        type="radio"
        name="gender"
        value="other"
        checked={value === "other"}
        onChange={handleChange}
      />
      Other
    </div>
  );
}

export default Radio;

样式化Radio

Radio单选框的默认样式可能并不美观，因此您需要使用CSS来样式化它们。您可以使用以下CSS规则来样式化Radio：

input[type="radio"] {
  margin-right: 5px;
}

这将为Radio单选框添加一个边距，使其更易于阅读。您还可以使用其他CSS规则来样式化Radio，例如更改字体、颜色或背景颜色。

结论

Radio单选框是React中一种常用的表单元素。它们允许用户在多个选项中选择一个，并可以通过CSS轻松地样式化。