3.React之简单登录界面及日历控件、图标小案例

风_Sux123

已于 2023-03-13 13:46:03 修改

阅读量188

点赞数

分类专栏： React学习记录文章标签： react.js javascript 前端

于 2023-03-13 13:38:39 首次发布

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

版权

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

21 篇文章 1 订阅

订阅专栏

1.新建文件UserBiography.jsx

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 { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message,Space, Checkbox,Select } from 'antd';

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

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());
  
  const initialState2 = { HealthIssue: '', Disabilty: '',Could9:'', income:'',Jobless:'',Nursing:'',Care:''  }
  const [selectedItems, setSelectedItems] = useState(initialState2);
  
  useEffect(() => {
    fetchTodos();
    fetchBooks();
  }, []);
  
  async function fetchTodos() {
    try {
      const todoData = await API.graphql(graphqlOperation(listTodos));
      
      const todos = todoData.data.listTodos.items
  //    console.log("todoData->",todos)
      setTodos(todos)
    } catch (err) { console.log('error fetching todos') }
  }
  
  async function fetchBooks() {
    try {
      const bookData = await API.graphql(graphqlOperation(listBooks));
      
      const todos = bookData.data.listBooks.items
   //   console.log("listBooks->",todos)
      setBooks(todos)
    } catch (err) { console.log('error fetching todos') }
  }
  
  const handleChange = (e) => {
    console.log("handleChange->",e.target);
    if(e.target.checked !== true) return
    setSelectedItems(e.target.value)
  }
  
  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}>
      <h2>Amplify Todos</h2>
      <input
        onChange={event => setInput('name', event.target.value)}
        style={styles.input}
        value={formState.name}
        placeholder="Name"
      />
      <input
        onChange={event => setInput('description', event.target.value)}
        style={styles.input}
        value={formState.description}
        placeholder="Description"
      />
      <button style={styles.button} onClick={addBooks}>Create Todo</button>
      
       
       {/*  {
        todos.map((todo, index) => (
          <div key={todo.id ? todo.id : index} style={styles.todo}>
            <p style={styles.todoName}>{todo.name}</p>
            <p style={styles.todoDescription}>{todo.description}</p>
          </div>
        ))
      }*/}
  
  
       {/*日历组件
        <div className='calendar-container' style={{position:"absolute",top:"501px",left:"16px"}}>
            <Calendar  onChange={setDate} value={date}    />
        </div>*/}    
  
      
       {/*输入框前后带图标
       <TextField 
            fontFamily="Noto Sans JP"
            fontSize="16px"
            fontWeight="400"
            width="100%"
            placeholder="Face to Face"
            color="rgba(28,26,27,1)"
            lineHeight="24px"
            textAlign="left"
            padding="0px 0px 0px 0px"
            innerStartComponent={
              <FieldGroupIcon ariaLabel="">
                  <SaveIcon1 />
              </FieldGroupIcon>
                  }
        />*/}
  </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' }
}


//图标区
const SaveIcon1 = () => (
              <Icon
                  width="13px"
                  height="16px"
                    paths={[
                      {
                        d: "M0 16.3313C0.923695 11.6838 3.6245 7.8 8.10241 4.68C12.5803 1.56 17.8112 0 23.7952 0C26.8072 0 29.6386 0.414375 32.2892 1.24313C34.9398 2.07188 37.3293 3.2175 39.4578 4.68C39.0562 5.2325 38.7249 5.72813 38.4639 6.16687C38.2028 6.60563 37.992 7.02 37.8313 7.41C35.9839 6.0125 33.8655 4.91563 31.4759 4.11938C29.0863 3.32313 26.5261 2.925 23.7952 2.925C19.2972 2.925 15.3012 3.965 11.8072 6.045C8.31325 8.125 5.86345 10.79 4.45783 14.04C3.5743 14.2025 2.751 14.4706 1.98795 14.8444C1.2249 15.2181 0.562249 15.7138 0 16.3313L0 16.3313ZM23.7952 39C17.8112 39 12.5803 37.4319 8.10241 34.2956C3.6245 31.1594 0.923695 27.2675 0 22.62C0.522088 23.27 1.16466 23.79 1.92771 24.18C2.69076 24.57 3.53414 24.8463 4.45783 25.0088C5.86345 28.2588 8.32329 30.9156 11.8373 32.9794C15.3514 35.0431 19.3374 36.075 23.7952 36.075C29.498 36.075 34.3373 34.4581 38.3133 31.2244C42.2892 27.9906 44.2771 24.0825 44.2771 19.5C44.2771 18.9475 44.2369 18.395 44.1566 17.8425C44.0763 17.29 43.9759 16.7375 43.8554 16.185C44.1366 16.25 44.4076 16.2906 44.6687 16.3069C44.9297 16.3231 45.2008 16.3313 45.4819 16.3313C45.8434 16.3313 46.1948 16.315 46.5361 16.2825C46.8775 16.25 47.2088 16.2013 47.5301 16.1362C47.6506 16.6887 47.741 17.2413 47.8012 17.7938C47.8614 18.3463 47.8916 18.915 47.8916 19.5C47.8916 22.165 47.259 24.6838 45.994 27.0563C44.7289 29.4288 43.0121 31.5006 40.8434 33.2719C38.6747 35.0431 36.1245 36.4406 33.1928 37.4644C30.261 38.4881 27.1285 39 23.7952 39ZM15.1205 18.3788L19.759 14.625L15.0602 10.8225L12.9518 12.5288L15.5422 14.5763L12.9518 16.6725L15.1205 18.3788ZM45.4819 13.4062C44.2369 13.4062 43.1727 13.0487 42.2892 12.3337C41.4056 11.6187 40.9639 10.7575 40.9639 9.75C40.9639 8.905 41.2349 8.0275 41.7771 7.1175C42.3193 6.2075 43.5542 4.63125 45.4819 2.38875C47.4096 4.63125 48.6446 6.2075 49.1867 7.1175C49.7289 8.0275 50 8.905 50 9.75C50 10.7575 49.5582 11.6187 48.6747 12.3337C47.7912 13.0487 46.7269 13.4062 45.4819 13.4062ZM32.5301 18.4275L34.6988 16.6725L32.1084 14.5763L34.6386 12.5288L32.5301 10.8225L27.8313 14.625L32.5301 18.4275ZM23.7952 22.5713C22.751 22.5713 21.7269 22.6688 20.7229 22.8638C19.7189 23.0588 18.755 23.3513 17.8313 23.7413L9.03615 19.6462C9.03615 19.1262 8.89558 18.6469 8.61446 18.2081C8.33333 17.7694 7.93173 17.42 7.40964 17.16C6.60643 16.8025 5.76305 16.7131 4.87952 16.8919C3.99598 17.0706 3.31325 17.485 2.83133 18.135C2.38956 18.785 2.28916 19.4675 2.53012 20.1825C2.77108 20.8975 3.29317 21.45 4.09639 21.84C4.65863 22.1 5.23092 22.2138 5.81325 22.1812C6.39558 22.1488 6.96787 22.0025 7.53012 21.7425L15.0602 25.3013C14.3373 25.8538 13.6847 26.455 13.1024 27.105C12.5201 27.755 12.0281 28.47 11.6265 29.25L14.8193 29.25C15.7028 27.885 16.9578 26.8288 18.5843 26.0813C20.2108 25.3337 21.9679 24.96 23.8554 24.96C25.743 24.96 27.4799 25.3337 29.0663 26.0813C30.6526 26.8288 31.9076 27.885 32.8313 29.25L35.9639 29.25C34.9598 27.235 33.3534 25.6181 31.1446 24.3994C28.9357 23.1806 26.4859 22.5713 23.7952 22.5713Z",
                        fill: "rgba(26,26,28,1)",
                        fillRule: "nonzero",
                      },
                    ]}
                    position="absolute"
                    right="" 
                    />
);

2.数据库（都是创建表时，自动生成的）

import { createTodo, createBook } from '../graphql/mutations' //添加

export const createBook = /* GraphQL */ `
  mutation CreateBook(
    $input: CreateBookInput!
    $condition: ModelBookConditionInput
  ) {
    createBook(input: $input, condition: $condition) {
      id
      yoyakukijitu
      yoyakujikan
      danwakeijiki
      createdAt
      updatedAt
      _version
      _deleted
      _lastChangedAt
    }
  }
`;

export const createTodo = /* GraphQL */ `
  mutation CreateTodo(
    $input: CreateTodoInput!
    $condition: ModelTodoConditionInput
  ) {
    createTodo(input: $input, condition: $condition) {
      id
      name
      description
      createdAt
      updatedAt
      _version
      _deleted
      _lastChangedAt
    }
  }
`;

import { listTodos, listBooks} from '../graphql/queries' //查询

export const listTodos = /* GraphQL */ `
  query ListTodos(
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        description
        createdAt
        updatedAt
        _version
        _deleted
        _lastChangedAt
      }
      nextToken
      startedAt
    }
  }
`;

export const listBooks = /* GraphQL */ `
  query ListBooks(
    $filter: ModelBookFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listBooks(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        yoyakukijitu
        yoyakujikan
        danwakeijiki
        createdAt
        updatedAt
        _version
        _deleted
        _lastChangedAt
      }
      nextToken
      startedAt
    }
  }
`;