#yyds干货盘点 React工作记录二十一ant design封装一个弹框组件

Posted 2023-03-16

 

目录

​​前言​​

​​导语​​

​​代码部分​​

​​引入组件​​

​​运行结果​​

​​总结​​

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 试着封装一个弹框的组件

​编辑

代码部分

//取消机构和取消讲师的方法封装
//params visible控制弹框的一个现实和隐藏
//params content文本内容
import React from react;
import 
    Modal,
   Icon,
   Button 
   from antd;

class CancelModel extends React.Component 
    stata = 
        
    

    //控制确定调用的函数
    handleOk=() => 
        this.props.handleOk&&this.props.handleOk();
    
     //控制弹窗的一个关闭
     handleCancel=() => 
        this.props.handleCancel&&this.props.handleCancel();
    
    //控制页面跳转的参数
    handleSkip=() => 
        // this.props.handleSkip&&this.props.handleSkip();
     
    render() 
        const cancleVisible,content=this.props
      
        return (<div>
        <Modal
          title="提示"
          visible=cancleVisible
          onOk=this.handleOk
          onCancel=this.handleCancel
          style=textAlign:center
        >
            <Icon type="exclamation-circle" />
            <p>content||</p>
            /* <Button type="link" block onClick=this.handleSkip>
            点击跳转
            </Button> */
        
        </Modal>
        </div>)
    


export default CancelModel

引入组件

import CancelModel from ../common/ComponentsList/cancleModel

<CancelModel content=content  handleOk=this.
handleLectureOk cancleVisible=cancleVisible 
handleCancel=this.handleLectureCancle />

运行结果

编辑

总结

content代表文件中的内容 根据取消和确定中的方法进行子传父的调用 确定和取消会触发的回调

#yyds干货盘点 React工作记录十一控制ant design中form的必填项判断

 

目录

​​前言​​

​​导语​​

​​代码实现​​

​​总结​​

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 我这边需要做一个关于form表单验证的一个要求 当他在A状态的时候 我们需要设置验证 当在B状态的时候 我们不需要设置验证

代码实现

/* 控制验证的规则 */
          <Form.Item label="状态">
            getFieldDecorator(
              signInResson,
              form.getFieldsValue().signInResult === A ||
                form.getFieldsValue().signInResult === B
                ? 
                    initialValue: ,
                    rules: [ required: true, message: 请填写状态 ],
                  
                :  rules: [ message: 请填写状态 ] 
            )(
              <Select style= width: 100% >
                ResultYyList.map((item) => (
                  <Select.Option key=item.key value=item.key>
                    item.value
                  </Select.Option>
                ))
              </Select>
            )
          </Form.Item>

总结

本文需要有一定React和ant design基础的朋友才能看懂 通过外部的状态判断是否为必填项

从而需求实现了 同事直呼歌谣太棒了