---
order: 2
title: 受控
description: 使用 CheckboxGroupField 渲染的组，通过设置 value 属性可以让组件变成受限组件。
---

````jsx
import CheckboxField from '@alicd/crui-checkbox-field';
import { Form } from '@alicd/next';

class App extends React.Component {
    state = {
      checked: true
    };
    render() {
        return (
            <Form>
                <CheckboxField
                    label="受控的 checkbox"
                    checked={this.state.checked}
                    onChange={
                        (checked) => {
                            this.setState({checked: checked});
                        }
                    }
                />
            </Form>
        );
    }
}

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

```` template
<Form>
    <CheckboxField
        label="受控的 checkbox"
        checked={this.state.checked}
        onChange={this.onChange}
    />
</Form>
````
```` javascript
walle.view.extend({
  state: {
    checked: true
  },
  onChange: function(checked) {
    this.setState({checked: checked});
  }
})
````