前端实习-踩坑week2

前端踩坑记录

Antd的语言设置：

Antd默认是英文的，设置为中文需要导入一下文档：

import zh_CN from 'antd/lib/locale-provider/zh_CN';

参数的传递：

确定需要传递的参数[ data, columns ](需要传递什么参数依据个人考虑)，使用props接收参数，然后通过解构赋值来得到所需要的参数

需要注意的是，在TSX当中使用props传递参数可能会报隐性any错误，这个时候只需要在报错的前面增加一行注释，注释的内容为 @ts-ignore，记住是添加注释而不是直接添加 @ts-ignore

// @ts-ignore
function MyTable(props)  {

    const { data, columns } = props;


}

在使用的时候只需要传递相应的参数即可

<MyTable data={data} columns={columns}/>

Antd的From.List的使用以及表单整体数据的绑定：

使用<Form.Item name=“”>当中的name来监管单个的数据，例如：

<From ref={userInfo} onFinish={handleOk}>
    <Form.Item name= "payType">
        <Select placeholder="收款/退款">
            <Option value="收款">收款</Option>
            <Option value="退款">退款</Option>
        </Select>
    </Form.Item>
</From>

当选中收款的时候，使用userInfo.current.getFieldsValue()来获取userInfo里面所有的值，当中则会包含一个数据：[ payType：”收款” ]

需要一提的是，<Form.Item name= “payType”>只能有一个数据，如果有多个数据不会报语法错误，但是获取到的会是错误的数据

From.LIst也是挺好用的，可以动态的添加表单组件，其数据的绑定如下：

function App() {
    const userInfo= React.createRef();
    return (
        <From ref={userInfo} onFinish={handleOk}>
            <Form.List name="payLog" initialValue={[""]}>
                {/* :Fields["amountType","amount","payType"] */}
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name }) => (
                            <Form.Item key={key}>
                                <Row gutter={0}>
                                    <Col span={4}>
                                        <Form.Item name={[name, "payType"]}>
                                            <Select placeholder="收款/退款">
                                                <Option value="收款">收款</Option>
                                                <Option value="退款">退款</Option>
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                    <Col span={4}>
                                        <Form.Item name={[name, "payMoney"]}>
                                            <Input />
                                        </Form.Item>
                                    </Col>
                                    <Col span={1}>
                                        <Button type="text"
                                            className="from-delete-button"
                                            onClick={() => remove(name)}
                                            icon={<MinusCircleOutlined />}>
                                        </Button>
                                    </Col>
                                    <Col span={1}>
                                        <Button type="text" onClick={() => add()} icon={<PlusOutlined />}>
                                        </Button>
                                    </Col>
                                </Row>
                            </Form.Item>
                        ))}
                    </>
                )}
            </Form.List>
        </From>
    )
}

以上代码实现收款表单的随意增加删减并且绑定了数据，

fields.map(({ key, name }) 当中的name即是来自于From.List的name，

<Form.Item name={[name, “payMoney”]}>所获取到的数据则是表现为，userInfo.current.getFieldsValue().payLog.payMoney

当需要使用数据的时候，可以额外顶一个Button，通过handleOk函数使用即可（From 需要绑定onFinish={handleOk}），如下：

const handleOk = () => {
    console.log('userInfo', userInfo.current.getFieldsValue())
};

<Button key=”submit” type=”submit” onClick={handleOk} className=”modal-button”>
    提交订单
</Button>

大概效果如下：

可以试着绑定多个数据然后 consol.log(‘userInfo’, userInfo.current.getFieldsValue()) 打印数据：

对于Antd样式的修改：

对于编写的每个标签，建议都带上项目风格的className，

当需要修改Antd的插件css时，指定前几代的父级className，最好可以带上前面提到的充满当前项目风格的className，这样定位几乎没有误差，不会造成损害

在修改添加项目本身的css的时候都可以额外指定父级标签的className来更准确的修改样式

例如：

修改前：

 修改后：

右键点击查看样式：

修改代码：

.ant-row>.ant-col>.ant-input-group>.ant-picker>.ant-picker-input {
    width:75px;
}