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

<div class="code-box">
  <div class="code-box-demo">
    <div id="components-checkbox-demo-controller"></div>
    <script>(function(){'use strict';

var Checkbox = antd.Checkbox;
var container = document.getElementById('components-checkbox-demo-controller');

var App = React.createClass({
  displayName: 'App',

  getInitialState: function getInitialState() {
    return {
      checked: true,
      disabled: false
    };
  },
  render: function render() {
    var label = (this.state.checked ? '选中' : '取消') + '-' + (this.state.disabled ? '不可用' : '可用');
    return React.createElement(
      'div',
      null,
      React.createElement(
        'p',
        { style: { marginBottom: '20px' } },
        React.createElement(
          'label',
          null,
          React.createElement(Checkbox, { checked: this.state.checked,
            disabled: this.state.disabled,
            onChange: this.onChange }),
          label
        )
      ),
      React.createElement(
        'p',
        null,
        React.createElement(
          'button',
          { className: "ant-btn ant-btn-primary ant-btn-sm",
            onClick: this.toggleChecked },
          !this.state.checked ? "选中" : "取消"
        ),
        React.createElement(
          'button',
          { style: { 'marginLeft': '10px' },
            className: "ant-btn ant-btn-primary ant-btn-sm",
            onClick: this.toggleDisable },
          !this.state.disabled ? "不可用" : "可用"
        )
      )
    );
  },
  toggleChecked: function toggleChecked(e) {
    this.setState({ checked: !this.state.checked });
  },
  toggleDisable: function toggleDisable(e) {
    this.setState({ disabled: !this.state.disabled });
  },
  onChange: function onChange(e) {
    console.log('checked = ', e.target.checked);
    this.setState({
      checked: e.target.checked
    });
  }
});

React.render(React.createElement(App, null), container);})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Checkbox = antd.Checkbox;
<span class="keyword">var</span> container = document.getElementById(<span class="string">'components-checkbox-demo-controller'</span>);

<span class="keyword">var</span> App = React.createClass({
  getInitialState() {
    <span class="keyword">return</span> {
      checked: <span class="literal">true</span>,
      disabled: <span class="literal">false</span>
    }
  },
  render() {
    <span class="keyword">var</span> label = (<span class="keyword">this</span>.state.checked ? <span class="string">'选中'</span> : <span class="string">'取消'</span>) + <span class="string">'-'</span> +
      (<span class="keyword">this</span>.state.disabled ? <span class="string">'不可用'</span> : <span class="string">'可用'</span>);
    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="title">div</span>&gt;</span>
      <span class="tag">&lt;<span class="title">p</span> <span class="attribute">style</span>=<span class="value">{{marginBottom:</span> '<span class="attribute">20px</span>'}}&gt;</span>
        <span class="tag">&lt;<span class="title">label</span>&gt;</span>
          <span class="tag">&lt;<span class="title">Checkbox</span> <span class="attribute">checked</span>=<span class="value">{this.state.checked}</span>
            <span class="attribute">disabled</span>=<span class="value">{this.state.disabled}</span>
            <span class="attribute">onChange</span>=<span class="value">{this.onChange}</span> /&gt;</span>
            {label}
        <span class="tag">&lt;/<span class="title">label</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">p</span>&gt;</span>
      <span class="tag">&lt;<span class="title">p</span>&gt;</span>
        <span class="tag">&lt;<span class="title">button</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary ant-btn-sm"</span>
          <span class="attribute">onClick</span>=<span class="value">{this.toggleChecked}</span>&gt;</span>
          {!this.state.checked ? "选中":"取消"}
        <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
        <span class="tag">&lt;<span class="title">button</span> <span class="attribute">style</span>=<span class="value">{{'marginLeft':</span> '<span class="attribute">10px</span>'}}
          <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary ant-btn-sm"</span>
          <span class="attribute">onClick</span>=<span class="value">{this.toggleDisable}</span>&gt;</span>
          {!this.state.disabled ? "不可用":"可用"}
        <span class="tag">&lt;/<span class="title">button</span>&gt;</span>
      <span class="tag">&lt;/<span class="title">p</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">div</span>&gt;</span>;</span>
  },
  toggleChecked(e) {
    <span class="keyword">this</span>.setState({checked: !<span class="keyword">this</span>.state.checked});
  },
  toggleDisable(e) {
    <span class="keyword">this</span>.setState({disabled: !<span class="keyword">this</span>.state.disabled});
  },
  onChange(e) {
    console.log(<span class="string">'checked = '</span>, e.target.checked);
    <span class="keyword">this</span>.setState({
      checked: e.target.checked
    });
  }
});

React.render(<span class="xml"><span class="tag">&lt;<span class="title">App</span> /&gt;</span>, container);</span></code></pre></div>
  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">和外部组件通信</div>
    <p>联动 checkbox。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>