app.jsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import * as React from 'react';
  2. import { BrowserRouter as Router, Switch, Redirect, Route, Link } from 'react-router-dom';
  3. import { Button, Row, Col,Pagination } from 'antd';
  4. import './App.scss';
  5. export default class App extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. name: '飞鼠',
  10. age: 18
  11. };
  12. }
  13. heandleClick() {
  14. this.setState({
  15. age: this.state.age + 1
  16. });
  17. }
  18. onValueChange() {
  19. this.setState({
  20. age: this.state.age + 1
  21. });
  22. }
  23. render() {
  24. return (
  25. <div>
  26. <Row>
  27. <Pagination defaultCurrent={1} total={50} showSizeChanger />
  28. </Row>
  29. <Row>
  30. <Col span={12}>
  31. <h2>I am {this.state.name}</h2>
  32. <p>I am {this.state.age}</p>
  33. <div className="context">i am {this.state.name}</div>
  34. <Button
  35. onClick={e => {
  36. this.heandleClick(e);
  37. }}
  38. >
  39. 加一岁
  40. </Button>
  41. <input
  42. type="text"
  43. onChange={e => {
  44. this.onValueChange(e);
  45. }}
  46. />
  47. </Col>
  48. </Row>
  49. <Row>
  50. <Col span={12}>
  51. <div>
  52. <Button type="primary">Primary</Button>
  53. <Button>Default</Button>
  54. <Button type="dashed">Dashed</Button>
  55. <Button type="danger">Danger</Button>
  56. <Button type="link">Link</Button>
  57. </div>
  58. </Col>
  59. </Row>
  60. </div>
  61. );
  62. }
  63. }