yzsd
Version:
a niubi UI component
39 lines (38 loc) • 1.53 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* title: 可选择标签
* description: 可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。
该组件为完全受控组件，不支持非受控用法。
*/
import React, { useState } from 'react';
import { Tag } from 'yzsd';
var CheckableTag = Tag.CheckableTag;
var tagsData = ['Movies', 'Books', 'Music', 'Sports'];
var App = function App() {
var _useState = useState(['Books']),
_useState2 = _slicedToArray(_useState, 2),
selectedTags = _useState2[0],
setSelectedTags = _useState2[1];
var handleChange = function handleChange(tag, checked) {
var nextSelectedTags = checked ? [].concat(_toConsumableArray(selectedTags), [tag]) : selectedTags.filter(function (t) {
return t !== tag;
});
console.log('You are interested in: ', nextSelectedTags);
setSelectedTags(nextSelectedTags);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
style: {
marginRight: 8
}
}, "Categories:"), /*#__PURE__*/React.createElement(React.Fragment, null, tagsData.map(function (tag) {
return /*#__PURE__*/React.createElement(CheckableTag, {
key: tag,
checked: selectedTags.includes(tag),
onChange: function onChange(checked) {
return handleChange(tag, checked);
}
}, tag);
})));
};
export default App;