mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
1.5 KiB
1.5 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
联动 checkbox。
en-US
Communicated with other components.
import { Checkbox, Button } from 'antd';
class App extends React.Component {
state = {
checked: true,
disabled: false,
};
toggleChecked = () => {
this.setState({ checked: !this.state.checked });
};
toggleDisable = () => {
this.setState({ disabled: !this.state.disabled });
};
onChange = e => {
console.log('checked = ', e.target.checked);
this.setState({
checked: e.target.checked,
});
};
render() {
const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${
this.state.disabled ? 'Disabled' : 'Enabled'
}`;
return (
<>
<p style={{ marginBottom: '20px' }}>
<Checkbox
checked={this.state.checked}
disabled={this.state.disabled}
onChange={this.onChange}
>
{label}
</Checkbox>
</p>
<p>
<Button type="primary" size="small" onClick={this.toggleChecked}>
{!this.state.checked ? 'Check' : 'Uncheck'}
</Button>
<Button
style={{ margin: '0 10px' }}
type="primary"
size="small"
onClick={this.toggleDisable}
>
{!this.state.disabled ? 'Disable' : 'Enable'}
</Button>
</p>
</>
);
}
}
ReactDOM.render(<App />, mountNode);