將Props傳遞給組件以獲取todoListId-有解無憂

我有這個專案，它是一個Todo專案，我想創建一個任務，任務的API我們必須向它傳遞三個元素，第一個是“todoListId”，第二個是“title”，第三個是“內容”。

問題是我想通過“todoListId”但我無法通過它，我該怎么做？

通過這個檔案，我將值“Title”和“Content”傳遞給“CreateCardAction”函式，但我仍然需要傳遞“TodolistId”，而且我必須從組件“singleList”傳遞“TodolistId”，因為它在里面組件“SingleList”我稱之為組件“TaskModal”

TaskModal.tsx：

import { Grid, Typography } from "@material-ui/core";
import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import NotesIcon from "@material-ui/icons/Notes";
import SubtitlesIcon from "@material-ui/icons/Subtitles";
import useStyle from "../../../../styles/task-modal-style";
import AddIcon from "@material-ui/icons/Add";
import { bindActionCreators } from "redux";
import { Actions } from "../../../../redux-store/actions/actions";
import { connect } from "react-redux";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";

interface in_TaskModal {
  todoListId?: number;
  title: string;
  todos?: Todo[];
}

const TaskModal: React.FC<{
  // in_TaskModal: in_TaskModal;
  todoListId?: number;
  todocard?: Object;
  CreateCardAction: Function;
}> = ({ CreateCardAction, todocard }) => {
  console.log("todocard: ", todocard);
  const classes = useStyle();
  const [open, setOpen] = React.useState(false);

  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");

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

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

  const handleSubmit = (e: { preventDefault: () => void }) => {
    alert(1);
    e.preventDefault();
    setOpen(false);
    alert(2);
    CreateCardAction(title, content);
    alert(3);
    console.log("title inside list modal: ", title);
  };

  return (
    <Grid>
      <Grid
        container
        direction="row"
        justifyContent="flex-start"
        alignItems="flex-end"
      >
        <Grid item>
          <Grid
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-end"
          >
            <Button
              onClick={handleClickOpen}
              className={classes.createTaskbutton}
              startIcon={<AddIcon style={{ fontSize: 17 }} />}
            >
              Create new task
            </Button>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        container
        lg={12}
        xs={12}
        justifyContent="center"
        alignItems="center"
      >
        <Dialog
          classes={{ root: classes.root }}
          // className={classes.root}
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
        >
          <Grid container direction="column">
            <Grid item>
              <Grid container direction="column">
                <Grid item>
                  <DialogTitle id="form-dialog-title">
                    <Grid container direction="column">
                      <Grid item>
                        <Grid container direction="row">
                          <Grid item>
                            <SubtitlesIcon className={classes.icon} />
                          </Grid>

                          <Grid item>
                            <Typography className={classes.text}>
                              Task Title
                            </Typography>
                          </Grid>
                        </Grid>
                      </Grid>
                      <Grid item>
                        <TextField
                          className={classes.titleField}
                          id="standard-basic"
                          value={title}
                          onChange={(e) => setTitle(e.target.value)}
                        />
                      </Grid>
                    </Grid>
                  </DialogTitle>
                </Grid>
                <Grid item>{/* llll */}</Grid>
              </Grid>
            </Grid>
            <Grid item>
              <DialogContent>
                <DialogContentText>
                  <Grid container direction="row">
                    <Grid item>
                      <NotesIcon className={classes.icon} />
                    </Grid>
                    <Grid item>
                      <Typography className={classes.text}>
                        Description
                      </Typography>
                    </Grid>
                  </Grid>
                </DialogContentText>
                <TextField
                  variant="outlined"
                  style={{ textAlign: "left" }}
                  multiline
                  rows={2}
                  className={classes.titleField}
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                />
              </DialogContent>
            </Grid>
            <Grid
              item
              container
              justifyContent="flex-start"
              alignItems="flex-end"
            >
              <DialogActions>
                <Button
                  variant="contained"
                  className={classes.button}
                  onClick={handleSubmit}
                >
                  Create Task
                </Button>
              </DialogActions>
            </Grid>
          </Grid>
        </Dialog>
      </Grid>
    </Grid>
  );
};

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      ...Actions,
    },
    dispatch
  );
}

function mapStateToProps(state: any) {
  console.log("todo card: ", state);
  return {
    todocard: state,
  };
}

const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(TaskModal);

通過這個組件，我可以呼叫另一個名為“TaskModal”的組件，并將“TodoListId 作為 data.todoListId”傳遞給它“將 TodoListId 傳遞給 TaskModal”

singleList.tsx：

import { Card, CardContent, CardHeader, Grid } from "@material-ui/core";
import React from "react";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";
import { useStyle } from "../../../../styles/list-styles";
import CardTodo from "../card/cardTodo";
import TaskModal from "../modals/task-modal";

interface in_SingleList {
  id?: number;
  title: string;
  todos?: Todo[];
}

const SingleList: React.FC<in_SingleList> = (data: in_SingleList) => {
  console.log("data inside single list: ", data);
  const classes = useStyle();
  return (
    <Grid className={classes.root}>
      {/* 1 */}
      <Grid item>
        <Grid container>
          {/* 1-1 */}
          <Grid item>
            <Card elevation={4} className={classes.card}>
              <Grid item>
                <Grid container>
                  <CardHeader
                    classes={{
                      title: classes.headerTitle,
                    }}
                    title={data.title}
                  ></CardHeader>
                </Grid>
              </Grid>
              {/* 1-1-1 */}
              <Grid item>
                <Grid container>
                  <CardContent>
                    <Grid container direction="column" spacing={3}>
                      {/* 1-1-1-1 */}
                      {data.todos?.map((t: Todo, index: number) => (
                        <Grid item key={index}>
                          <CardTodo title={t.title || ""} />
                        </Grid>
                      ))}
                    </Grid>
                  </CardContent>
                </Grid>
              </Grid>

              {/* 1-1-2 */}
              <Grid item className={classes.button}>
                <TaskModal />
              </Grid>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default SingleList;

uj5u.com熱心網友回復：

既然你要求編輯你的代碼，我會盡力而為。由于我不知道您要實作的目標的整個背景關系，因此我正在嘗試進行最小的更改以使其正常作業。

TastModal.tsx

import { Grid, Typography } from "@material-ui/core";
import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import NotesIcon from "@material-ui/icons/Notes";
import SubtitlesIcon from "@material-ui/icons/Subtitles";
import useStyle from "../../../../styles/task-modal-style";
import AddIcon from "@material-ui/icons/Add";
import { bindActionCreators } from "redux";
import { Actions } from "../../../../redux-store/actions/actions";
import { connect } from "react-redux";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";

interface OwnProps {
  todoListId: number;
  CreateCardAction: (title: string, content: string, id: number) => void;
}

interface StateProps {
  todocard: unknown; // Since I don't know your state
}

type Props = OwnProps & StateProps;

const TaskModal: React.FC<Props> = ({
  CreateCardAction,
  todocard,
  todoListId
}) => {
  console.log("todocard: ", todocard);
  const classes = useStyle();
  const [open, setOpen] = React.useState(false);

  const [title, setTitle] = React.useState("");
  const [content, setContent] = React.useState("");

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

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

  const handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    CreateCardAction(title, content, todoListId);
    console.log("title inside list modal: ", title);
    handleClose()
  };

  return (
    <Grid>
      <Grid
        container
        direction="row"
        justifyContent="flex-start"
        alignItems="flex-end"
      >
        <Grid item>
          <Grid
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-end"
          >
            <Button
              onClick={handleClickOpen}
              className={classes.createTaskbutton}
              startIcon={<AddIcon style={{ fontSize: 17 }} />}
            >
              Create new task
            </Button>
          </Grid>
        </Grid>
      </Grid>
      <Grid
        container
        lg={12}
        xs={12}
        justifyContent="center"
        alignItems="center"
      >
        <Dialog
          classes={{ root: classes.root }}
          // className={classes.root}
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
        >
          <Grid container direction="column">
            <Grid item>
              <Grid container direction="column">
                <Grid item>
                  <DialogTitle id="form-dialog-title">
                    <Grid container direction="column">
                      <Grid item>
                        <Grid container direction="row">
                          <Grid item>
                            <SubtitlesIcon className={classes.icon} />
                          </Grid>

                          <Grid item>
                            <Typography className={classes.text}>
                              Task Title
                            </Typography>
                          </Grid>
                        </Grid>
                      </Grid>
                      <Grid item>
                        <TextField
                          className={classes.titleField}
                          id="standard-basic"
                          value={title}
                          onChange={(e) => setTitle(e.target.value)}
                        />
                      </Grid>
                    </Grid>
                  </DialogTitle>
                </Grid>
                <Grid item>{/* llll */}</Grid>
              </Grid>
            </Grid>
            <Grid item>
              <DialogContent>
                <DialogContentText>
                  <Grid container direction="row">
                    <Grid item>
                      <NotesIcon className={classes.icon} />
                    </Grid>
                    <Grid item>
                      <Typography className={classes.text}>
                        Description
                      </Typography>
                    </Grid>
                  </Grid>
                </DialogContentText>
                <TextField
                  variant="outlined"
                  style={{ textAlign: "left" }}
                  multiline
                  rows={2}
                  className={classes.titleField}
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                />
              </DialogContent>
            </Grid>
            <Grid
              item
              container
              justifyContent="flex-start"
              alignItems="flex-end"
            >
              <DialogActions>
                <Button
                  variant="contained"
                  className={classes.button}
                  onClick={handleSubmit}
                >
                  Create Task
                </Button>
              </DialogActions>
            </Grid>
          </Grid>
        </Dialog>
      </Grid>
    </Grid>
  );
};

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      ...Actions
    },
    dispatch
  );
}

function mapStateToProps(state: any): StateProps {
  console.log("todo card: ", state);
  return {
    todocard: state
  };
}

const connector = connect(mapStateToProps, mapDispatchToProps);
export default connector(TaskModal);

singleList.tsx

import { Card, CardContent, CardHeader, Grid } from "@material-ui/core";
import React from "react";
import { Todo } from "../../../../redux-store/reducers/todo-card-reducer";
import { useStyle } from "../../../../styles/list-styles";
import CardTodo from "../card/cardTodo";
import TaskModal from "../modals/task-modal";

interface in_SingleList {
  id: number;
  title: string;
  todos?: Todo[];
}

const SingleList: React.FC<in_SingleList> = (data: in_SingleList) => {
  console.log("data inside single list: ", data);
  const classes = useStyle();

  const handleCreateCard = (title: string, content: string, id: number) => {
    // Do what you want with the data
    console.log(title, content, id)
  }

  return (
    <Grid className={classes.root}>
      {/* 1 */}
      <Grid item>
        <Grid container>
          {/* 1-1 */}
          <Grid item>
            <Card elevation={4} className={classes.card}>
              <Grid item>
                <Grid container>
                  <CardHeader
                    classes={{
                      title: classes.headerTitle,
                    }}
                    title={data.title}
                  ></CardHeader>
                </Grid>
              </Grid>
              {/* 1-1-1 */}
              <Grid item>
                <Grid container>
                  <CardContent>
                    <Grid container direction="column" spacing={3}>
                      {/* 1-1-1-1 */}
                      {data.todos?.map((t: Todo, index: number) => (
                        <Grid item key={index}>
                          <CardTodo title={t.title || ""} />
                        </Grid>
                      ))}
                    </Grid>
                  </CardContent>
                </Grid>
              </Grid>

              {/* 1-1-2 */}
              <Grid item className={classes.button}>
                <TaskModal CreateCardAction={handleCreateCard} todoListId={data.id} />
              </Grid>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default SingleList;

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399019.html

標籤：反应打字稿还原

上一篇：我想將我的兩個狀態輸入資料放入一個表中以進行反應

下一篇：Firestore查詢不回傳任何檔案，即使它們以斜體顯示在控制臺中