@accessible/radio 中文文档教程

Question

---

<Radio>

npm i @accessible/radio

---

React 的可访问无线电组件。 这个库允许你创建 你自己的收音机有你自己的风格，同时保持能力 使用键盘聚焦并更新无线电输入。

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 import {RadioGroup, Radio, Mark}

从'@accessible/radio' const MyRadio = () => (

What is your favorite food?

<label>
  <Radio value='pizza'>
    <span className='my-radio'>
      <Mark checkedClass='checked' uncheckedClass='unchecked'>
        <span className='mark' />
      </Mark>
    </span>
  </Radio>
  Pizza
</label>

<label>
  <Radio value='tacos'>
    <span className='my-radio'>
      <Mark checkedClass='checked' uncheckedClass='unchecked'>
        <span className='mark' />
      </Mark>
    </span>
  </Radio>
  Tacos
</label>

)

## API

### <RadioGroup>

Creates context that controls the child [`<Radio>`](#radio) components. This is also where you set
controlled values and default values for the radio group.

#### Props

| Prop         | Type                                                                                  | Default     | Required? | Description                                                                                                                                                                                                                      |
| ------------ | ------------------------------------------------------------------------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name         | `string`                                                                              | `undefined` | Yes       | The name of the checkbox group (applied to each child [`<Radio>`](#radio) input)                                                                                                                                                 |
| value        | <code>value: string &#0124; number &#0124; string[] &#0124; undefined</code>          | `undefined` | No        | Makes the radio group a controlled component which can no longer be updated with the `setValue` control or any [`<Radio>`](#radio) controls. It should be the same as one of the values in the child [`<Radio>`](#radio) inputs. |
| defaultValue | <code>value: string &#0124; number &#0124; string[] &#0124; undefined</code>          | `undefined` | No        | This sets the default radio group value. It should be the same as one of the values in the child [`<Radio>`](#radio) inputs.                                                                                                     |
| onChange     | <code>(value: string &#0124; number &#0124; string[] &#0124; undefined) => any</code> | `undefined` | No        | This callback fires each time the checked value changes                                                                                                                                                                          |
| children     | `React.ReactNode`                                                                     | `undefined` | No        | Any React nodes, including your [`Radio`](#radio) inputs                                                                                                                                                                         |

### useRadioGroup()

A React hook that returns the [`RadioGroupContextValue`](#radiogroupcontextvalue) for the nearest `<RadioGroup>` parent.

### RadioGroupContextValue

打字稿 接口 RadioGroupContextValue { 名称：字符串 值：字符串 | 编号 | 字符串[] | 不明确的 设定值： （ 价值： | 字符串`` | 数字 | 细绳[] | 不明确的 | ((( 当前：字符串 | 编号 | 字符串[] | 不明确的 ) => 字符串 | 编号 | 字符串[] | 不明确的） ) => 空白 }

### <Radio>

Creates a visually hidden radio input that is focusable and accessible via keyboard navigation.
All props passed to this component are applied to the `<input>`. This also creates a context
provider enabling the other components in this library to access the radio's state
deep in the tree.

#### Props

| Prop     | Type                        | Default     | Required? | Description                                                  |
| -------- | --------------------------- | ----------- | --------- | ------------------------------------------------------------ |
| disabled | `boolean`                   | `false`     | No        | Disables this radio option                                   |
| onChange | `(checked: boolean) => any` | `undefined` | No        | Called each time the `checked` state of this option changes. |
| children | `React.ReactNode`           | `undefined` | No        | Your custom styled radio.                                    |

### &lt;Mark&gt;

A convenient component for conditionally adding class names and styles when the `<Radio>` component is checked/unchecked. It must be a child of a `<Radio>`.

#### Props

| Prop           | Type                  | Default     | Required? | Description                                                                         |
| -------------- | --------------------- | ----------- | --------- | ----------------------------------------------------------------------------------- |
| uncheckedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the radio is `unchecked`. |
| checkedClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the radio is `checked`.   |
| uncheckedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the radio is `unchecked`.    |
| checkedStyle   | `React.CSSProperties` | `undefined` | No        | These styles name will be applied to the child element when the radio is `checked`. |
| children       | `React.ReactNode`     | `undefined` | Yes       | The child you wish to render when the radio is checked.                             |

### &lt;Checked&gt;

The child of this component will only render when the `<Radio>` is in
a `checked` state. It must be a child of a `<Radio>`.

#### Props

| Prop     | Type              | Default     | Required? | Description                                             |
| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------- |
| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the radio is checked. |

### &lt;Unchecked&gt;

The child of this component will only render when the `<Radio>` is in
an `unchecked` state. It must be a child of a `<Radio>`.

#### Props

| Prop     | Type              | Default     | Required? | Description                                               |
| -------- | ----------------- | ----------- | --------- | --------------------------------------------------------- |
| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the radio is unchecked. |

### useRadio()

A React hook that returns the [`RadioContextValue`](#radiocontextvalue) for the nearest `<Radio>` parent.

### RadioContextValue

打字稿 接口 RadioContextValue { // 收音机是否有 checked 属性？ 检查：布尔值 // 收音机当前是否聚焦？ 重点：布尔值 // 无线电当前是否被禁用？ 禁用：布尔值 // 检查收音机 检查： () => 空白 //取消选中无线电 取消选中：() => 空白 } ```

LICENSE

麻省理工学院