code-pen-antd

code-pen-antd.markdown

code-pen-antd

A Pen by karl on CodePen.

License.

index.html

<div id="container">

</div>

script.babel

const { Tooltip } = antd;

const App = React.createClass({
  getInitialState() {
    return {
      switch: false
    }
  },
  showSmsDetail() {
    this.setState({
      switch: !this.state.switch
    });
  },
  render() {
    console.log(this.state.switch);
    return (
      <div style={this.state.switch ? {display: 'none'} : {display: 'block'}}>
       <a onClick={this.showSmsDetail.bind(this, '')} style={{fontSize: 16, color: '#6C7B8A',  position: 'relative', top: 60, left: 68}}>
								<Tooltip title="注意： 总消耗短信包括测试短信，分类短信中不包括测试短信">
									<span>详情清单</span>
								</Tooltip>
							</a>
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('container'));

scripts

<script src="https://npmcdn.com/react/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
<script src="https://npmcdn.com/antd/dist/antd.js"></script>

styles

<link href="https://npmcdn.com/antd/dist/antd.css" rel="stylesheet" />