前端实习-踩坑week2

2022-07-09 09:00:08 阅读：194 来源： 互联网

标签：name 前端 ant userInfo 实习 Antd 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())
};

大概效果如下：

可以试着绑定多个数据然后 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;
}

标签：name,前端,ant,userInfo,实习,Antd,week2,数据,收款
来源： https://www.cnblogs.com/bqyb/p/16456214.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端实习-踩坑week2