单击按钮创建卡片

Question

所以我做了一个日历，下面有一些你可以填写的文本字段。

我怎样才能做到这一点，当您在这里填写所有内容并单击按钮时，它会自动创建一张上面填写的内容的卡片？

Firebase 可以正常工作，您填写的所有内容也会进入数据库

如果你点击按钮，它应该是这样的

这里是我的代码：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import { Checkbox, Container, Slide } from "@material-ui/core";
import Icon from "@material-ui/core/Icon";
import { StyleSheet } from "react-native";
import firebase from "firebase/app";
import "firebase/firestore";
import { db } from "../../firebase";
import { ScrollView } from "react-native-gesture-handler";





export default function DateAndTimePickers() {
  const classes = useStyles();
  const [ort, setOrt] = useState("");
  const [notiz, setNotiz] = useState("");
  const [hinweis, setHinweis] = useState("");
  const [eintragen, setEintragen] = useState([]);
  const [dateandtime, setDateandtime] = useState([]);

  function handelDateandTime(e) {
    setDateandtime(e.target.value);
  }
  function handelOrt(e) {
    setOrt(e.target.value);
  }
  function handelNotiz(e) {
    setNotiz(e.target.value);
  }
  function handelHinweis(e) {
    setHinweis(e.target.value);
  }
  function KalenderEintrag() {
    db.collection("Eintrag")
      .doc()
      .set({
        ort,
        notiz,
        hinweis,
        dateandtime,
      })
      .then(() => {
        //If you wish to push the written data to your local state, you can do it here
        setEintragen([...eintragen, { ort, notiz, hinweis, dateandtime }]);
        console.log("Documents saved succesfully");
      })
      .catch((err) => {
        console.log(err);
      });
  }
  return (
    <ScrollView style={styles.root}>
      <Container>
        <TextField
          id="datetime-local"
          label="Neues Ereigniss"
          type="datetime-local"
          defaultValue="2021-09-16T10:30"
          className={classes.root}
          InputLabelProps={{
            shrink: true,
          }}
          onChange={(value) => {
            handelDateandTime(value);
          }}
        />
      </Container>
      {/* ORT */}
      <Container className={classes.ortContainer}>
        <TextField
          id="standard-helperText"
          label="Ort"
          defaultValue="Text"
          onChange={(value) => {
            handelOrt(value);
          }}
        />
      </Container>
      {/* Hinweis */}
      <Container className={classes.ortContainer}>
        <TextField
          id="standard-helperText"
          label="Hinweis"
          defaultValue="Text"
          onChange={(value) => {
            handelHinweis(value);
          }}
        />
      </Container>
      {/* Notizen */}
      <Container className={classes.ortContainer}>
        <TextField
          id="standard-helperText"
          label="Notizen"
          defaultValue="Text"
          onChange={(value) => {
            handelNotiz(value);
          }}
        />
      </Container>
      

      <Container>
        <Button onClick={() => KalenderEintrag()}  className={classes.btn} variant="outlined">Absenden</Button>
      </Container>

      {/* Kalender einträge  */}
      <Card className={classes.card}>
        <CardContent>
          <Typography
            className={classes.title}
            color="textSecondary"
            gutterBottom
          >
            AUSFLUG
          </Typography>
          <Typography variant="h5" component="h2">
            Wilheminenberg
          </Typography>
          <Typography className={classes.pos} color="textSecondary">
            Jause wird mitgegeben
          </Typography>
          <Typography variant="body2" component="p">
            Am 13.9.21 von 09:00 - 13:00
            <br />
            {"Abholung erfolgt im KG"}
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small" variant="outlined">
            Zur Kenntniss genommen
          </Button>
        </CardActions>
      </Card>
    </ScrollView>
  );
}


//material UI style
const useStyles = makeStyles({
  root: {
    marginTop: 30,
    marginLeft: 16,
  },
  card: {
    marginTop: 30,
    marginLeft: 15,
    marginRight: 15,
  },
  bullet: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)",
  },
  title: {
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
  },
  table: {
    marginTop: 30,
  },
  ortContainer: {
    marginTop: 30,
    marginLeft: 15,
    marginRight: 15,
  },
  btn:{
    marginTop: 20,
    marginLeft: 15,
  }
});

//React native style
const styles = StyleSheet.create({
  root: {
    backgroundColor: "white",
  },
});

Answer 1

就这样https://codesandbox.io/s/peaceful-hugle-ufkso

{/* Kalender einträge  */}
      {eintragen.map((item) => {
        return (
          <Card className={classes.card}>
          <CardContent>
            <Typography
              className={classes.title}
              color="textSecondary"
              gutterBottom
            >
              {item.ort}
            </Typography>
            <Typography variant="h5" component="h2">
              {item.notiz}
            </Typography>
            <Typography className={classes.pos} color="textSecondary">
              {item.hinweis}
            </Typography>
            <Typography variant="body2" component="p">
              {item.dateandtime}
              <br />
              {"Abholung erfolgt im KG"}
            </Typography>
          </CardContent>
          <CardActions>
            <Button size="small" variant="outlined">
              Zur Kenntniss genommen
            </Button>
          </CardActions>
        </Card>
        )
      })}

Answer 2

您可以在 JSX 代码中使用大括号引用变量（这已经用于应用样式，例如在 {classes.ortContainer} 中）。用变量替换文本的工作方式相同，例如用 {ort} 替换“Wilheminenberg”，让您的网站显示相应的值。

Answer 3

在 react-bootstrab 或者 material ui 上导入卡片，使用这个方法 **const [open ,setOpen] = useState(false);

enter code here

   import React,{useState} from 'react';
    import {Card} from '@material-ui/core'
    
    function CreateCardButtonOnClick(){
    
    const [open, setOpen] =useState(false);
    
    const OpenCard=()=>{
    setOpen(true);
    };
    
    const closeCard =()=>{
    setOpen(false);
    };
    
    return(
    <div>
     <span>click to open Card viwe</span>
     <button onClick={openCard}>openCard</button>
     <Card>
     <h1 onClick={openCard}>close</h1>
     </Card>
     </div>
     )
     export defult CreateCardButtonOnClick;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.6/react-dom.min.js"></script>

`/* import React,{useState} from 'react'; 从“@material-ui/core”导入{Card}

function CreateCardButtonOnClick(){

const [open, setOpen] =useState(false);

const OpenCard=()=>{
setOpen(true);
};

const closeCard =()=>{
setOpen(false);
};

return(
<div>
 <span>click to open Card viwe</span>
 <button onClick={openCard}>openCard</button>
 <Card>
 <h1 onClick={openCard}>close</h1>
 </Card>
 </div>
 )
 export defult CreateCardButtonOnClick;*/`