ant-design/components/checkbox/demo/controller.md

77 lines
1.5 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 2
2016-08-18 11:22:55 +08:00
title:
zh-CN: 受控的 Checkbox
en-US: Controlled Checkbox
2016-03-31 09:40:55 +08:00
---
2015-07-15 15:19:24 +08:00
2016-08-18 11:22:55 +08:00
## zh-CN
2015-07-15 15:19:24 +08:00
联动 checkbox。
2016-08-18 11:22:55 +08:00
## en-US
Communicated with other components.
2017-02-13 10:55:53 +08:00
````jsx
import { Checkbox, Button } from 'antd';
2015-07-15 15:19:24 +08:00
class App extends React.Component {
state = {
checked: true,
disabled: false,
};
2018-06-27 15:55:04 +08:00
2015-07-16 14:34:42 +08:00
render() {
2016-08-18 11:22:55 +08:00
const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
return (
<div>
<p style={{ marginBottom: '20px' }}>
2017-05-15 16:36:07 +08:00
<Checkbox
checked={this.state.checked}
2016-02-17 18:02:33 +08:00
disabled={this.state.disabled}
onChange={this.onChange}
>
2016-02-17 18:02:33 +08:00
{label}
</Checkbox>
</p>
<p>
2017-05-15 14:37:22 +08:00
<Button
type="primary"
size="small"
onClick={this.toggleChecked}
>
2016-08-18 11:22:55 +08:00
{!this.state.checked ? 'Check' : 'Uncheck'}
2016-02-17 18:02:33 +08:00
</Button>
2017-05-15 14:37:22 +08:00
<Button
style={{ marginLeft: '10px' }}
type="primary"
size="small"
onClick={this.toggleDisable}
>
2016-08-18 11:22:55 +08:00
{!this.state.disabled ? 'Disable' : 'Enable'}
2016-02-17 18:02:33 +08:00
</Button>
</p>
</div>
);
}
2018-06-27 15:55:04 +08:00
toggleChecked = () => {
this.setState({ checked: !this.state.checked });
}
2018-06-27 15:55:04 +08:00
toggleDisable = () => {
this.setState({ disabled: !this.state.disabled });
}
2018-06-27 15:55:04 +08:00
onChange = (e) => {
2015-07-16 14:34:42 +08:00
console.log('checked = ', e.target.checked);
2015-07-16 14:48:57 +08:00
this.setState({
2015-12-27 16:20:59 +08:00
checked: e.target.checked,
2015-07-16 14:48:57 +08:00
});
}
}
2015-07-15 15:19:24 +08:00
ReactDOM.render(<App />, mountNode);
2015-07-15 15:19:24 +08:00
````