16.点击图标显示下拉列表

最新推荐文章于 2023-05-08 08:52:21 发布

风_Sux123

最新推荐文章于 2023-05-08 08:52:21 发布

阅读量158

点赞数

分类专栏： React学习记录文章标签： css html5 css3

本文链接：https://blog.csdn.net/qq_44438941/article/details/129686192

版权

React学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

这篇文章展示了如何在React应用中结合AntDesign和AWSAmplify库来创建UI组件。它导入了必要的库，如Amplify和GraphQL查询及操作，用于数据管理，并提供了创建待办事项和书籍的示例。此外，还涉及到了状态管理和事件处理，如添加新条目到列表中。

摘要由CSDN通过智能技术生成

ant.design（UI组件）

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 awsExports from "./aws-exports";
Amplify.configure(awsExports);*/

// import Calendar from 'react-calendar';
// import 'react-calendar/dist/Calendar.css';
import "../resources/Calendar.css";

import { PlusOutlined,DownOutlined,DownloadOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message,Space, Checkbox,Dropdown,Typography } from 'antd';

import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import {
  Flex,
  Icon,
  Image,
  SliderField,
  SwitchField,
  Text,
  View,
  Menu,
  MenuItem,
  
  FieldGroupIcon,
  FieldGroupIconButton,
  TextField
} from "@aws-amplify/ui-react";

const items = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    ),
  },
];

export default function UserBiography(props) {
  const { overrides, ...rest } = props;
  
  const initialState = { name: '', description: '' }
  const [formState, setFormState] = useState(initialState)
  
  const [todos, setTodos] = useState([])
  const [books, setBooks] = useState([])
  const [date, setDate] = useState(new Date());
  
  useEffect(() => {
    fetchTodos();
  }, []);
  
  async function fetchTodos() {
    try {
      const todoData = await API.graphql(graphqlOperation(listTodos));
      const todos = todoData.data.listTodos.items
      setTodos(todos)
    } catch (err) { console.log('error fetching todos') }
  }
  
  function setInput(key, value) {
    setFormState({ ...formState, [key]: value });
  }
  
  async function addTodo() {
    try {
      if (!formState.name || !formState.description) return
      const todo = { ...formState }
      setTodos([...todos, todo])
      setFormState(initialState)
      await API.graphql(graphqlOperation(createTodo, {input: todo}))
    } catch (err) {
      console.log('error creating todo:', err)
    }
  }
  
  async function addBooks() {
    try {
    // if (!formState.name || !formState.description) return
    //  const todo = { ...formState }
    const todo = { 
      yoyakukijitu:"11111",
      yoyakujikan:"3:00 AM - 4:00 PM",
      danwakeijiki:"2023-03-03"
    }
    //  setTodos([...todos, todo])
    //  setFormState(initialState)
      await API.graphql(graphqlOperation(createBook, {input: todo}))
    } catch (err) {
      console.log('error creating todo:', err)
    }
  }

  return (
    <div style={styles.container}>  
      <Space direction="vertical">
        <Space wrap>
        <Dropdown
          menu={{
            items,
          }}
          placement="bottomLeft"
        >
         <Button shape="circle" type="link" icon={<DownloadOutlined />} />
        </Dropdown>
      </Space>
    </Space>
  </div>
  )
}

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"}
}

效果展示