@txdfe/at-collect v0.2.0

at-collect

简介

收藏组件，一个小星星。

使用示例

import Collect from '@txdfe/at-collect';

class Demo extends React.Component {
  state = {
    collected: false,
    collected1: false,
    collected2: false,
    collected3: false,
    collected4: false,
  };

  onClick = () => {
    this.setState({
      collected: !this.state.collected
    });
  };

  onClick1 = () => {
    this.setState({
      collected1: !this.state.collected1
    });
  };

  onClick2 = () => {
    this.setState({
      collected2: !this.state.collected2
    });
  };

  onClick3 = () => {
    this.setState({
      collected3: !this.state.collected3
    });
  };

  onClick4 = () => {
    this.setState({
      collected4: !this.state.collected4
    });
  };

  render() {
    return (
      <div>
        <Collect
          collected={this.state.collected}
          onClick={this.onClick}
        />
        <Collect
          language="en-us"
          collected={this.state.collected1}
          onClick={this.onClick1}
        />
        <Collect
          collected={this.state.collected3}
          onClick={this.onClick3}
          hoverCollectedText="hover收藏"
          hoverUncollectedText="hover取消收藏"
        />
        <Collect
          language="en-us"
          type="button"
          collected={this.state.collected2}
          onClick={this.onClick2}
        />
        <Collect
          type="button"
          collected={this.state.collected4}
          buttonCollectedText="收藏了"
          buttonUncollectedText="还没有收藏"
          onClick={this.onClick4}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API