kara-rc-web/dev/root.js

kara项目react组件库

import React from 'react'

import '../src/index.scss'

import Icon from '../src/components/icon/icon'
import Dropdown from '../src/components/dropdown/dropdown'
import Inputrc from '../src/components/inputrc/inputrc'
import Count from '../src/components/count/count'
import Pagination from '../src/components/pagination/pagination'
import DatePicker from '../src/components/datepicker/datepicker'

// eslint-disable-next-line
class Root extends React.Component {
  state = {
    dropList: [
      {
        value: 1,
        label: '1first-sef-test',
      },
      {
        value: 2,
        label: '2first-sef-test',
      },
      {
        value: 3,
        label: '3first-sef-test',
      },
    ],
    inputdata: '',
    rule: {
      reg: 'a',
      text: '请填写收货人地址',
    },
    num: 2,
  }

  handleChange = (e) => {
    // 输入框控制变量
    this.setState({ inputdata: e.target.value })
  }

  numChange = (num) => {
    this.setState({ num })
  }

  pageChage = (num) => {
    console.info('跳转到了第', num, '页')
  }

  timeChange = (date, dateString) => {
    console.info(date, dateString)
  }

  render() {
    return (<div>
      <Icon type="more" />
      <Dropdown >{this.state.dropList}</Dropdown>
      <Inputrc value={this.state.inputdata} onChange={this.handleChange} rule={this.state.rule} />
      <Count num={this.state.num} onChange={this.numChange} />
      <Pagination current={2} total={40} onChange={this.pageChage} />
      <DatePicker onChange={this.timeChange} placeholder="选择日期" />
      <Dropdown type="orange">{this.state.dropList}</Dropdown>
    </div>)
  }
}

export default Root