React antd 组件

antd list列表

dataSource里面放列表数据
父页面传值在子页面解构使用
actions={[]}里面可以写按钮在父页面传递list全部数据 还有事件 在子页面可以解构直接使用

每个卡片封装成一个单独组件循环渲染

这是父页面

	<List
        grid={{ gutter: 16, column: 4 }}
        dataSource={list}
        renderItem={item => (
          <List.Item>
            <Listcard item={item} />
          </List.Item>
        )}
      />
`

这是子页面 接受item 每一个对象

function Listcard({ item }) {
  return (
    <Card title={item.title}>Card content</Card>
  )
}

antd form 表单

要声明一个 const [form] = Form.useForm(); 钩子函数
还要在form表单里 form={form} 绑定
const [list, setlist] = React.useState([])
前面是值 后面是方法
解构获取的总数据 然后更改

 let nlist = []
        nlist = res.data.result.list.map(function (x, y) {
          return { ...x, ...JSON.parse(x.info) };
 });
setlist(nlist)

路由动态传值

 props.history.push({
      pathname: '/bj/inout',
      search: qs.stringify(value)
  })

接受动态路由的传值

   const { id } = qs.parse(props.location.search.substr(1))

解构上面传过的id
判断有没有id 如果没有是添加 有是编辑
表单清空值 form.resetFields()
从生命周期React.useEffect(()=>{},[])里
let objValues = qs.parse(props.location.search.substr(1))
form.setFieldsValue(objValues) 编辑回填

表单时间

在表单提交的时候 解构values 就是表单获取的全部值
要安装moment并引用

import moment from 'moment'

moment().format();
这就是获取表单时间

  var str = { ...values }
  str.time = values.time.format('YYYY-MM-DD')
  

回填表单时间

  let day = moment(objValues.time)
      console.log(day)
      objValues.time = day

console.log(moment(‘2010-11-20’).isBetween(‘2010-10-19’, ‘2010-10-25’))
这是输出一个布尔值 第一个时间是否在后两个时间之间

antd Layout布局

在common里面写一个主体组件 要解构一个{children}
替换Content 子页面用的时候 引用 将最外面的盒子替换成组件名
**

路由守卫

import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

<BrowserRouter>
      <Switch>
        <Route path="/log" component={Log} />
        <Route path="*" render={() => {
          let token = localStorage.getItem('data')
          if (token) {
            return (
              <Mark>
                <Switch>
                  <Route path="/form" component={FormList} />
                  <Route path="/" component={Home} />
                </Switch>
              </Mark>
            )
          }
          return <Redirect to="/log" />
        }} />
      </Switch>
    </BrowserRouter>

switch开关

<Switch onChange={(e) => onChange(e, 对象)} checked={itch} />

赋值接受对象开关的属性
判断字符串改成布尔值
赋初始值

 var itsw = item.switch
  if (itsw == 'false') {
    itsw = false
  }
  if (itsw == 'true') {
    itsw = true
  }
  const [itch, setch] = React.useState(itsw)
  const onChange = (checked, e) => {
    setch(checked)
    e.switch = checked
    http.post('/Home/Apis/samplePut', { info: e }).then((res) => {
      console.log(res.data);
    })
  }

分页

 pagination={{
          current: page,
          pageSize: size,
          total: count,
          onChange(page) {
            setpage(page)
          }
        }}

在onchage事件里面更改页数

表格

        <Table rowSelection={{
          selectedRowKeys: isList,
          onChange(selectedRowKeys, selectedRows) {
            // console.log(selectedRowKeys, selectedRows);
            if (selectedRowKeys.length > 3) {
              return false
            } else {
              setId(selectedRowKeys)
            }
          }
        }} rowKey="id" pagination={{
          current: page, pageSize: size, total: count, onChange(num) {
            // console.log(num)
            setpage(num)
          }
          
        }} dataSource={list} columns={columns} />