反应形式单选按钮 - TypeScript

在 TypeScript 中，可以通过使用反应形式单选按钮组件来创建用户可以选择一个选项的界面元素。这个组件允许用户只选择一个选项，与多选框不同。

如何使用反应形式单选按钮组件

要使用 TypeScript 中的反应形式单选按钮组件，需要首先导入它：

import { Radio } from 'antd';

然后，在组件中使用 Radio 组件并设置 value 属性将该选项的值传递给父组件。

import { Radio } from 'antd';
import React, { useState } from 'react';

interface Props {
  value: string;
  onChange(value: string): void;
}

const MyRadio: React.FC<Props> = ({ value, onChange }) => {
  const [radioValue, setRadioValue] = useState<string>(value);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setRadioValue(value);
    onChange(value);
  };

  return (
    <Radio.Group value={radioValue} onChange={handleChange}>
      <Radio value="option1">选项一</Radio>
      <Radio value="option2">选项二</Radio>
      <Radio value="option3">选项三</Radio>
    </Radio.Group>
  );
};

export default MyRadio;

在上面的代码片段中，我们定义了一个 MyRadio 组件，用于渲染一组单选按钮。它接受 value 和 onChange 两个属性，value 代表当前选择的选项值，onChange 则为在选择选项时调用的回调函数。

在组件中，我们使用 useState 声明了一个 radioValue 状态变量，用于记录当前选项的值。然后，我们在 Radio.Group 中设置 value 属性为 radioValue，并通过 onChange 属性指定了一个回调函数 handleChange 来处理选择选项的事件。

当用户选择选项时，handleChange 将会更新 radioValue 的值，并调用 onChange 传入当前选项的值，从而让父组件能够处理这个选项变化的事件。

封装成可复用组件

以上示例只是一个简单的演示，如果要在应用程序中重复使用此组件，则最好将其封装成可重用的组件。

在实际应用程序中，你应该考虑自定义 MyRadio 组件的样式和布局，以使其更好地适应你的应用程序。

import { Radio } from 'antd';
import React, { useState } from 'react';

interface RadioOption {
  label: string;
  value: string;
}

interface Props {
  value: string;
  onChange(value: string): void;
  options: RadioOption[];
  horizontal?: boolean;
}

const RadioGroup: React.FC<Props> = ({ value, onChange, options, horizontal = true }) => {
  const [radioValue, setRadioValue] = useState<string>(value);
  const layout: 'horizontal' | 'vertical' = horizontal ? 'horizontal' : 'vertical';

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setRadioValue(value);
    onChange(value);
  };

  return (
    <Radio.Group value={radioValue} onChange={handleChange} layout={layout}>
      {options.map((option, index) => (
        <Radio key={index} value={option.value}>
          {option.label}
        </Radio>
      ))}
    </Radio.Group>
  );
};

export default RadioGroup;

在上面的代码中，我们将 MyRadio 组件重命名为 RadioGroup 并增加一些自定义属性以定制它的行为。horizontal 属性用于控制单选按钮是否呈水平布局。options 属性用于传递要创建的单选按钮的选项数组。每个选项应该包含一个 label 属性和一个 value 属性。

结论

在 TypeScript 中，反应形式单选按钮是一个很好的选择，因为它提供了一种用户可以选择一个选项的方法，这个组件可以通过 Radio 组件来实现，并通过 value 和 onChange 属性实现。你可以将它封装成一个可复用的组件，以便在应用程序中重复使用。