Element React 中文文档 Element-React Tag 标签

用于标记和选择。

基础用法

由type属性来选择tag的类型，也可以通过color属性来自定义背景色。

render() {
  return (
    <div>
      <Tag>标签一</Tag>
      <Tag type="gray">标签二</Tag>
      <Tag type="primary">标签三</Tag>
      <Tag type="success">标签四</Tag>
      <Tag type="warning">标签五</Tag>
      <Tag type="danger">标签六</Tag>
    </div>
  )
}

可移除标签

设置closable属性来定义一个可移除的标签，接受一个Boolean，设置为true即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置closeTransition属性，它接受一个Boolean，true 为关闭。设置close事件可以处理关闭后的回调函数。

constructor(props) {
  super(props);
  this.state = {
    tags: [
      { key: 1, name: '标签一', type: '' },
      { key: 2, name: '标签二', type: 'gray' },
      { key: 5, name: '标签三', type: 'primary' },
      { key: 3, name: '标签四', type: 'success' },
      { key: 4, name: '标签五', type: 'warning' },
      { key: 6, name: '标签六', type: 'danger' }
    ]
  }
}
handleClose(tag) {
  const { tags } = this.state;
  tags.splice(tags.map(el => el.key).indexOf(tag.key), 1);
  this.setState({ tag });
}
render() {
  return (
    <div>
      {
        this.state.tags.map(tag => {
          return (
            <Tag
              key={tag.key}
              closable={true}
              type={tag.type}
              closeTransition={false}
              onClose={this.handleClose.bind(this, tag)}>{tag.name}</Tag>
          )
        })
      }
    </div>
  )
}

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 onClose事件来实现

constructor(props) {
  super(props);
  this.state = {
    dynamicTags: ['标签一', '标签二', '标签三'],
    inputVisible: false,
    inputValue: ''
  }
}
onKeyUp(e) {
  if (e.keyCode === 13) {
    this.handleInputConfirm();
  }
}
onChange(value) {
  this.setState({ inputValue: value });
}
handleClose(index) {
  this.state.dynamicTags.splice(index, 1);
  this.forceUpdate();
}
showInput() {
  this.setState({ inputVisible: true }, () => {
    this.refs.saveTagInput.focus();
  });
}
handleInputConfirm() {
  let inputValue = this.state.inputValue;
  if (inputValue) {
    this.state.dynamicTags.push(inputValue);
  }
  this.state.inputVisible = false;
  this.state.inputValue = '';
  this.forceUpdate();
}
render() {
  return (
    <div>
      {
        this.state.dynamicTags.map((tag, index) => {
          return (
            <Tag
              key={Math.random()}
              closable={true}
              closeTransition={false}
              onClose={this.handleClose.bind(this, index)}>{tag}</Tag>
          )
        })
      }
      {
        this.state.inputVisible ? (
          <Input
            className="input-new-tag"
            value={this.state.inputValue}
            ref="saveTagInput"
            size="mini"
            onChange={this.onChange.bind(this)}
            onKeyUp={this.onKeyUp.bind(this)}
            onBlur={this.handleInputConfirm.bind(this)}
          />
        ) : <Button className="button-new-tag" size="small" onClick={this.showInput.bind(this)}>+ New Tag</Button>
      }
    </div>
  )
}

Attributes

Events