# zent-radio

> Zent Radio 单选框组件

Latest version **1.1.0** (published 2017-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install zent-radio
pnpm add zent-radio
yarn add zent-radio
bun add zent-radio
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-04-24 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2250 |
| Author | nino |
| Maintainers | delai, youzan-lc |

## Links

- npm: https://www.npmjs.com/package/zent-radio
- Repository: https://github.com/youzan/zent
- Homepage: https://github.com/youzan/zent#readme
- Issues: https://github.com/youzan/zent/issues
- npm.io page: https://npm.io/package/zent-radio

## Dependencies (1)

- [zent-utils](https://npm.io/package/zent-utils.md) 1.1.0

## Recent versions

- 1.1.0 (latest) — 2017-04-24
- 1.1.0-beta4 (beta) — 2017-04-19
- 1.1.0-beta1 — 2017-04-18
- 1.0.11 — 2017-04-13
- 1.0.10 — 2017-04-13
- 1.0.9 — 2017-03-31
- 1.0.8 — 2017-03-15
- 1.0.7 — 2017-03-08
- 1.0.7-beta2 — 2017-03-02
- 1.0.7-beta1 — 2017-02-27
- 1.0.6 — 2017-02-17
- 1.0.5 — 2017-02-15
- 1.0.4 — 2017-02-15
- 1.0.3 — 2017-02-15
- 1.0.2 — 2017-02-13
- … 2 more at https://npm.io/package/zent-radio/versions

## README

## Checkbox 单选

单选框组件

### 使用指南

- `RadioGroup` 是一个 **[受控组件][controlled-components]**, 必须要设置 `onChange` 回调方法在组件外部处理 `value` 变化.

### 代码演示
:::demo 基本用法
```js
import { Radio } from 'zent';

const RadioGroup = Radio.Group;

class App extends Component {

	state = {
		value: 'male'
	}

	onChange = (e) => {
		this.setState({ value: e.target.value });
	}

	render() {
		return (
			<RadioGroup onChange={this.onChange} value={this.state.value}>
				<Radio value="male">男</Radio>
				<Radio value="female">女</Radio>
			</RadioGroup>
		);
	}
}

ReactDOM.render(
	<App />
	, mountNode
);
```
:::

:::demo 不可用，整个`RadioGroup`都不可用
```js
import { Radio } from 'zent'

const RadioGroup = Radio.Group;

class App extends React.Component {

	state = {
		value: 'male'
	}

	onChange = (e) => {
		this.setState({ value: e.target.value });
	}

	render() {
		return (
			<RadioGroup onChange={this.onChange} value={this.state.value} disabled>
				<Radio value="male">男</Radio>
				<Radio value="female">女</Radio>
			</RadioGroup>
		);
	}
}

ReactDOM.render(
	<App />
	, mountNode
);
```
:::

:::demo 不可用，部分选项不可用
```js
import { Radio } from 'zent'

const RadioGroup = Radio.Group;

class App extends React.Component {

	state = {
		value: 'apple'
	}

	onChange = (e) => {
		this.setState({ value: e.target.value });
	}

	render() {
		return (
			<RadioGroup onChange={this.onChange} value={this.state.value}>
				<Radio value="apple">苹果</Radio>
				<Radio value="pears">梨子</Radio>
				<Radio value="cucumber" disabled>黄瓜</Radio>
			</RadioGroup>
		);
	}
}

ReactDOM.render(
	<App />
	, mountNode
);
```
:::

:::demo `value`可以是任意类型，可以使用`isValueEqual`来自定义比较函数
```js
import { Radio } from 'zent'

const RadioGroup = Radio.Group;

class App extends React.Component {

	state = {
		value: {
			foo: 1	
		}
	}

	onChange = (e) => {
		this.setState({ value: e.target.value });
	}

	isValueEqual(a, b) {
		return a && b && a.foo === b.foo;	
	}

	render() {
		return (
			<RadioGroup 
				value={this.state.value}
				isValueEqual={this.isValueEqual}
				onChange={this.onChange} 
			>
				<Radio value={{ foo: 1 }}>foo 1</Radio>
				<Radio value={{ foo: 2 }}>foo 2</Radio>
			</RadioGroup>
		);
	}
}

ReactDOM.render(
	<App />
	, mountNode
);
```
:::

### RadioGroup API

| 参数           | 说明                | 类型             | 默认值                 |
| ------------ | ----------------- | -------------- | ------------------- |
| value        | 用于设置当前选中的值        | any            |                     |
| onChange     | 选项变化时的回调函数        | func(e: event) |                     |
| isValueEqual | 可选参数，判断value值是否相等 | func(a, b)     | `(a, b) => a === b` |
| className    | 自定义额外类名           | string         |                     |
| prefix       | 自定义前缀             | string         | `'zent'`            |

### Radio API

| 参数        | 说明                   | 类型     | 默认值      |
| --------- | -------------------- | ------ | -------- |
| value     | 根据 value 进行比较，判断是否选中 | any    |          |
| className | 自定义额外类名              | string |          |
| prefix    | 自定义前缀                | string | `'zent'` |

[controlled-components]: https://facebook.github.io/react/docs/forms.html#controlled-components

---
_Source: https://npm.io/package/zent-radio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._