6.28 antd 组件的使用

Card

1.引入文件

import { Card } from 'antd';

2. title 和extra可以是一些比较复杂的结构

  const extra = (
            <Button type="primary">
                <PlusOutlined />
                <span>搜索</span>
            </Button>
        )
 <Card title={title} extra={<a href="#">More</a>} style={{ width: 300 }}>
     
    </Card>

Table

const dataSource = [
  {
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    render: age =>  age + '岁',  //指定了对应的属性，传入的是对应的属性值
  },
  {
    title: '住址',
    dataIndex: 'address',
     render: adress=> (
                    <span>
                        <Button type="primary">下架</Button>
                        <span>在售</span>
                    </span>
                )
  },
];

<Table dataSource={dataSource} columns={columns} bordered 
rowKey= 'name'/>;

dateSource:数据
columns ：每列

• title: 表头名（红色圈起的地方）
• dataIndex：对应dataSource 中的键
• rowKey:相当于key，但要注意，rowKey的值是dataSource中的键或者函数
• 还可以自定义数据或者结构 如render,render可以接收一个参数，
  1.如果没有定义dataIndex，则接收到的参数为对应数组中的每个单独的对象
  2.如果指定了dataIndex，接收到的数据，则是对应定义的值,
  如上面的代码中的age

Form表单

1. 这是antd中使用起来比较复杂的组件，我们详细剖析一下

<Form
      name="basic"
    >
      <Form.Item
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
        initialValue={categoryName}
      >
        <Input />
      </Form.Item>
    </Form>

表单中的每一项都Form.Item标签进行包裹
name值为每个Item项的唯一标识，获取值时，作为对象中的键
rules定义该项的规则
initialValue 只在第一次有效，通常和componentDidUpdate生命周期函数一起使用，在该周期函数中进行设置值，或者重置，达到更新值的效果

2. 接下来我们说一下表单中最重要的表单对象

• 在函数组件中，比较简单

const [form] = Form.useForm();

• 在类组件中

 export default class index extends Component {
  formRef = React.createRef();
  render() {
     return (
       <Form
          ref={this.formRef}
       >
     )
  }
 }

this.formRef.current 则相当于form对象

• 一些常用的方法

• form.getFieldsValue() //获取所有对象的值

• form.getFieldValue(key) //通过键值获取对应的值

• form.validateFields().then(values => {

})
//values 也可以获取所有表单中的值（是一个对象）