组件演示

[{"title":"基本","id":"components-checkbox-group-demo-basic","tags":[],"filepath":"site/components/checkbox-group/demo/basic.md","directory":"components/checkbox-group/demo","filename":"basic","meta":{"title":"基本","description":"\n<p>最简单的用法。</p>\n","order":"0","filepath":"site/components/checkbox-group/demo/basic.md","filename":"basic","directory":"components/checkbox-group/demo","id":"components-checkbox-group-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Item = _uxcore.CheckboxGroup.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: ['air'],\n disabled: false\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.CheckboxGroup,\n {\n disabled: this.state.disabled,\n onChange: this.handleChange.bind(this),\n value: this.state.value\n },\n React.createElement(Item, { text: '\\u5929\\u7A7A\\u5929\\u7A7A\\u5929\\u7A7A', value: 'air' }),\n React.createElement(Item, { text: '<b>\\u5927\\u6D77\\u5927\\u6D77\\u5927\\u6D77</b>', value: 'sea' }),\n React.createElement(Item, { text: '\\u9646\\u5730\\u9646\\u5730\\u9646\\u5730', disabled: true, value: 'land' }),\n React.createElement(Item, { text: '\\u98DE\\u673A\\u98DE\\u673A\\u98DE\\u673A', value: 'plane' }),\n React.createElement(Item, { text: '\\u706B\\u8F66\\u98DE\\u673A\\u98DE\\u673A', value: 'train' })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-checkbox-group-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { CheckboxGroup } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> Item = CheckboxGroup.Item;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: [<span class=\"hljs-string\">'air'</span>],\n disabled: <span class=\"hljs-literal\">false</span>,\n };\n }\n\n handleChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CheckboxGroup</span>\n <span class=\"hljs-attribute\">disabled</span>=<span class=\"hljs-value\">{this.state.disabled}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange.bind(this)}</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"天空天空天空\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"air\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"&lt;b&gt;大海大海大海&lt;/b&gt;\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"sea\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"陆地陆地陆地\"</span> <span class=\"hljs-attribute\">disabled</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"land\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"飞机飞机飞机\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"plane\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"火车飞机飞机\"</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"train\"</span> /&gt;</span>\n\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">CheckboxGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-checkbox-group-demo-basic'));\n</span></code></pre></div>"},"status":"public","toc":""}]

最简单的用法。


import { CheckboxGroup } from 'uxcore';

const Item = CheckboxGroup.Item;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ['air'],
      disabled: false,
    };
  }

  handleChange(value) {
    this.setState({
      value,
    });
  }

  render() {
    return (
      <div>
        <CheckboxGroup
          disabled={this.state.disabled}
          onChange={this.handleChange.bind(this)}
          value={this.state.value}
        >
          <Item text="天空天空天空" value="air" />
          <Item text="<b>大海大海大海</b>" value="sea" />
          <Item text="陆地陆地陆地" disabled value="land" />
          <Item text="飞机飞机飞机" value="plane" />
          <Item text="火车飞机飞机" value="train" />

        </CheckboxGroup>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-checkbox-group-demo-basic'));

Props

CheckboxGroup

配置项 类型 必填 默认值 功能/备注
value array required [] 由 value 组成地数组,与 React 受限组件表现一致,选中项与 value 保持一致,数组中的值与 item 的 value 相对应
onChange function required - 与 React 受限组件表现一致,在 checkbox 群发生改变时触发,借此来更改 value
disabled boolean optional false 是否为 disable 状态

CheckboxItem

通过 CheckboxGroup.Item 取得。

配置项 类型 必填 默认值 功能/备注
text string optinal - checkbox 后面跟着的说明文字
value string required - checkbox 对应的值
disabled boolean optional - Item 是否为 disable 状态,具有比 Group 更高的优先级