【发布时间】：2021-12-31 05:35:58
【问题描述】：
我有这个项目，它是一个 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 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;
【问题讨论】：
-
这里需要澄清一下，您是想将
id从singleList.tsx传递到TaskModal.tsx吗？ -
你是如何触发模态的？使用 onClick 或其他方法？
-
@MohitKushwaha 她使用按钮点击从模态组件内部触发模态
-
@VishnuSajeev 我认为有必要纠正一下，打开和关闭功能应该从父组件触发，然后将实现所需的功能，因为ID道具将通过传递给模态那个触发函数。
-
是的，我正在尝试将 id 从 singleList.tsx 传递给 TaskModal.tsx。 @Vishnu Sajeev
标签： reactjs typescript redux