---
order: 1
title: 中间状态组件
description: 通过使用 indeterminate 来渲染中间状态的组件。
---

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

class App extends React.Component {
    state = {
        checked: false,
        indeterminate: true,
        disabled: false
    };
    render() {
        return (
            <div>
                <CheckboxField
                    checked={this.state.checked}
                    indeterminate={this.state.indeterminate}
                    disabled={this.state.disabled}
                    onChange={
                        (checked) => {
                            this.setState({checked: checked, indeterminate: false});
                        }
                    }
                />
                <Button.Group>
                  <Button
                      onClick={
                          ()=>{
                              this.setState({checked: true, indeterminate: false});
                          }
                      }>checked = true</Button>
                  <Button
                      onClick={
                          ()=>{
                              this.setState({checked: false});
                          }
                      }
                  >checked = false</Button>
                  <Button
                      onClick={
                          ()=>{
                              this.setState({checked: false, indeterminate: true});
                          }
                      }
                  >indeterminate = true</Button>
                  <Button
                      onClick={
                          ()=>{
                              this.setState({indeterminate: false});
                          }
                      }
                  >indeterminate = false</Button>
                  <Button
                      onClick={
                          ()=>{
                              this.setState({disabled: !this.state.disabled});
                          }
                      }
                  >toggle disabled</Button>
                </Button.Group>
            </div>
        );
    }
}

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

````

```` template
<div>
    <CheckboxField
        checked={this.state.checked}
        indeterminate={this.state.indeterminate}
        disabled={this.state.disabled}
        onChange={this.onChange}
    />
    <Button.Group>
      <Button onClick={this.onClick1} >checked = true</Button>
      <Button onClick={this.onClick2} >checked = false</Button>
      <Button onClick={this.onClick3} >indeterminate = true</Button>
      <Button onClick={this.onClick4} >indeterminate = false</Button>
      <Button onClick={this.onClick5} >toggle disabled</Button>
    </Button.Group>
</div>
````

```` javascript
walle.view.extend({
   state : {
    checked: false,
    indeterminate: true,
    disabled: false
   },
   onChange: function(checked) {
    this.setState({checked: checked, indeterminate: false});
   },
   onClick1: function() {
   this.setState({checked: true, indeterminate: false});
   },
   onClick2: function() {
    this.setState({checked: false});
   },
   onClick3: function() {
    this.setState({checked: false, indeterminate: true});
   },
   onClick4: function() {
    this.setState({indeterminate: false});
   },
   onClick5: function() {
    this.setState({disabled: !this.state.disabled});
   }
})
````