将 Props 传递给组件以获取 todoListId

Question

我有这个项目，它是一个 Todo 项目，我想创建一个任务，任务的 API 我们必须将三个元素传递给它，第一个是“todoListId”，第二个是“标题”，第三个是“内容”。

问题是我想传递“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 as 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;

Answer 1

既然你要求编辑你的代码，我会尽力而为。由于我不知道您要实现的目标的整个上下文，因此我正在尝试进行最小的更改以使其发挥作用。

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;

将 Props 传递给组件以获取 todoListId

Pass Props to the component to take the todoListId

typescript

reactjs

redux