ray-tag-select

install

npm i --save ray-tag-select

usage

• Demo.js

import React, { Component } from 'react';
import { DemoContent } from 'ray-page-container';
import TagSelect from 'ray-tag-select';
import Actions from './Actions';

const Option = TagSelect.Option;

const categorys = [
  { key: 'tag-1', value: 'tag1', text: '张三' },
  { key: 'tag-2', value: 'tag2', text: '李四' },
  { key: 'tag-3', value: 'tag3', text: '王五' },
  { key: 'tag-4', value: 'tag4', text: '赵六' },
  { key: 'tag-5', value: 'tag5', text: '周七' }
];

class Demo extends Component {

  onChange = (checkedTags) => {
    console.log('checkedTags:', checkedTags);
  }

  render() {
    return (
      <DemoContent
        title={`TagSelect props 设置`}
        actions={<Actions />}
      >
        <TagSelect onChange={this.onChange} expandable>
          {categorys.map(c => <Option key={c.key} value={c.value}>{c.text}</Option>)}
        </TagSelect>
      </DemoContent>
    );
  }
}

export default Demo;

• actions.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ActionItem } from 'ray-page-container';

class Actions extends Component {
  state = {
    block: false
  };

  toggleBlock = (e) => {
    const checked = e.target.checked;
    this.setState({
      block: checked
    });
    this.props.onPropsChange({
      type: 'block',
      value: checked
    });
  }

  render() {
    const { block } = this.state;
    return (
      <div className="pan-zoom-action">
        <ActionItem label="块级(block)">
          <input
            type="checkbox"
            checked={block}
            onChange={this.toggleBlock}
          />
        </ActionItem>
      </div>
    );
  }
}

Actions.propTypes = {
  onPropsChange: PropTypes.func
};

export default Actions;

props

TagSelect

param	type	default	description
style	object	-	tags样式
className	string	-	css class
defaultValue	ReactText	-	默认选中的值, 不可控
onChange	Function(checkedTags)		标签选择的回调函数
expandable	Boolean	true	是否展示 展开/收起 按钮
block	Boolean	-	是否为块级

TagSelect.Option

param	type	default	description
value	number or string	-	option 值
children	string 、ReactNode	-	tag的内容
onChange	function	-	切换 选中回调
checked	boolean	-	是否选中

CheckableTag

param	type	default	description
checked	boolean	false	设置标签的选中状态
onChange	(checked) => void	-	点击标签时触发的回调

Lecense

MIT