Element-React Tag 標(biāo)簽

用于標(biāo)記和選擇。

基礎(chǔ)用法

由type屬性來選擇tag的類型，也可以通過color屬性來自定義背景色。

render() {
  return (
    <div>
      <Tag>標(biāo)簽一</Tag>
      <Tag type="gray">標(biāo)簽二</Tag>
      <Tag type="primary">標(biāo)簽三</Tag>
      <Tag type="success">標(biāo)簽四</Tag>
      <Tag type="warning">標(biāo)簽五</Tag>
      <Tag type="danger">標(biāo)簽六</Tag>
    </div>
  )
}

可移除標(biāo)簽

設(shè)置closable屬性來定義一個(gè)可移除的標(biāo)簽，接受一個(gè)Boolean，設(shè)置為true即可。默認(rèn)的標(biāo)簽移除時(shí)會(huì)附帶漸變動(dòng)畫，如果不想使用，可以設(shè)置closeTransition屬性，它接受一個(gè)Boolean，true 為關(guān)閉。設(shè)置close事件可以處理關(guān)閉后的回調(diào)函數(shù)。

constructor(props) {
  super(props);


  this.state = {
    tags: [
      { key: 1, name: '標(biāo)簽一', type: '' },
      { key: 2, name: '標(biāo)簽二', type: 'gray' },
      { key: 5, name: '標(biāo)簽三', type: 'primary' },
      { key: 3, name: '標(biāo)簽四', type: 'success' },
      { key: 4, name: '標(biāo)簽五', type: 'warning' },
      { key: 6, name: '標(biāo)簽六', 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>
  )
}

動(dòng)態(tài)編輯標(biāo)簽

動(dòng)態(tài)編輯標(biāo)簽可以通過點(diǎn)擊標(biāo)簽關(guān)閉按鈕后觸發(fā)的 onClose 事件來實(shí)現(xiàn)

constructor(props) {
  super(props);


  this.state = {
    dynamicTags: ['標(biāo)簽一', '標(biāo)簽二', '標(biāo)簽三'],
    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