19.React 弹窗及文本切换

Modal/Drawer - 浮层表单 - Pro Components (ant.design)   参考地址

效果展示 

import React, { useEffect, useState } from "react";
import { Amplify, API, graphqlOperation } from 'aws-amplify'
import { createTodo, createBook } from '../graphql/mutations'
import { listTodos, listBooks} from '../graphql/queries'
import "../resources/Calendar.css";import { getOverrideProps } from "@aws-amplify/ui-react/internal";import { Button, Form, Input, Modal, Select } from 'antd';
//import './style.less';
import { Flex, Icon, Image, Text, View,CheckboxField,Divider } from "@aws-amplify/ui-react";export default function UserBiography(props) {const { overrides, ...rest } = props;const [checkBtn,setCheckBtn] = useState(true);const [proposeBtn,setProposeBtn] = useState(false);function handleCheck(){setCheckBtn(true)setProposeBtn(false)}function handlePropose(){setCheckBtn(false)setProposeBtn(true)}React.useEffect(() => {setCheckBtn(true)setProposeBtn(false)},[])const [visiable, setVisiable] = useState(false);const [form] = Form.useForm();// 打开弹窗const open = () => {setVisiable(true);};//关闭弹窗const close = () => {setVisiable(false);};//点击确定提交表单const submit = ()=>{form.submit()}// 提交后获取表单数据，请求接口，重置表单并关闭const onSubmit = (values) =>{console.log(values)//await  fetch ...form.resetFields();close()}return (
弹窗及文本切换
新建{fontFamily: "Noto Sans JP",fontSize: "26px",fontWeight: "700",color: "rgba(28,26,27,1)",lineHeight: "39px"}}wrapClassName="modal-wrap"okText="Book"cancelButtonProps={{ shape: 'round' }}okButtonProps={{ shape: 'round' }}width={600}visible={visiable}title="Check Availability" onCancel={close} onOk={submit}>{zIndex: '1'}}// backgroundColor="red"alignItems="unset"justifyContent="unset"overflow="hidden"position="relative"padding="0px 0px 0px 0px">{cursor:"pointer"}}onClick={(event) => {handleCheck()}}{...getOverrideProps(overrides, "Check Availability")}>{cursor:"pointer"}}onClick={(event) => {handlePropose()}}{...getOverrideProps(overrides, "Propose new time")}>{ minX: 0, minY: 0, width: 10, height: 10 }}paths={[{d: "M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z",fill: "rgba(245,128,128,1)",fillRule: "nonzero",},]}display="block"gap="unset"alignItems="unset"justifyContent="unset"shrink="0"position="relative"{...getOverrideProps(overrides, "Ellipse 11232777")}>{ minX: 0, minY: 0, width: 10, height: 10 }}paths={[{d: "M10 5C10 7.76142 7.76142 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0C7.76142 0 10 2.23858 10 5Z",fill: "rgba(176,222,187,1)",fillRule: "nonzero",},]}display="block"gap="unset"alignItems="unset"justifyContent="unset"shrink="0"position="relative"{...getOverrideProps(overrides, "Ellipse 11232781")}>)
}const styles = {container: { width: 400, margin: '0 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20 },todo: {  marginBottom: 15 },input: { border: 'none', backgroundColor: '#ddd', marginBottom: 10, padding: 8, fontSize: 18 },todoName: { fontSize: 20, fontWeight: 'bold' },todoDescription: { marginBottom: 0 },button: { backgroundColor: 'black', color: 'white', outline: 'none', fontSize: 18, padding: '12px 0px' },aaa:{width: "31px"}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！