[{"title":"基本","id":"components-radiogroup-demo-basic","tags":[],"filepath":"site/components/radiogroup/demo/basic.md","directory":"components/radiogroup/demo","filename":"basic","meta":{"title":"基本","description":"\n<p>最简单的用法。</p>\n","order":"0","filepath":"site/components/radiogroup/demo/basic.md","filename":"basic","directory":"components/radiogroup/demo","id":"components-radiogroup-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.RadioGroup.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: 'apple'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n var me = this;\n me.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n _uxcore.RadioGroup,\n { value: me.state.value, onChange: me.handleChange.bind(me) },\n React.createElement(Item, { value: 'apple', text: '\\u82F9\\u679C' }),\n React.createElement(Item, { value: 'banana', text: '\\u9999\\u8549' }),\n React.createElement(Item, { value: 'orange', text: '\\u6A58\\u5B50', disabeld: true })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-radiogroup-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\n<span class=\"hljs-keyword\">import</span> { RadioGroup } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { Item } = RadioGroup;\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 constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: <span class=\"hljs-string\">'apple'</span>,\n };\n }\n\n handleChange(value) {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n me.setState({\n value,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">RadioGroup</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{me.state.value}</span> <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{me.handleChange.bind(me)}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"apple\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"苹果\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"banana\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"香蕉\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Item</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"orange\"</span> <span class=\"hljs-attribute\">text</span>=<span class=\"hljs-value\">\"橘子\"</span> <span class=\"hljs-attribute\">disabeld</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">RadioGroup</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-radiogroup-demo-basic'));\n</span></code></pre></div>"},"status":"public","toc":""}]

import { RadioGroup } from 'uxcore';
const { Item } = RadioGroup;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'apple',
    };
  }

  handleChange(value) {
    const me = this;
    me.setState({
      value,
    });
  }

  render() {
    const me = this;
    return (
      <RadioGroup value={me.state.value} onChange={me.handleChange.bind(me)}>
        <Item value="apple" text="苹果" />
        <Item value="banana" text="香蕉" />
        <Item value="orange" text="橘子" disabeld />
      </RadioGroup>
    );
  }
}

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