Reactjs 如何使用材质UI将表单数据发布到API中

我有一个POST API，它需要以下表单中的请求主体：

 {
        "module_id": 7,
        "module_type": "Post-Reading",
        "module_name": "Course Overview",
        "duration": 70,
 }

下面是我的React代码，我无法继续如何发送请求正文。 此外，我还想连续更新模块\u id。 有人能帮忙吗。我知道有很多错误，请帮忙改正

import React, { useState, useEffect } from 'react'
import Icon from '@material-ui/core/Icon';
import { makeStyles } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core';
import InputLabel from '@material-ui/core/InputLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import NativeSelect from '@material-ui/core/NativeSelect';
import MenuItem from '@material-ui/core/MenuItem';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot from '@material-ui/lab/TimelineDot';
import FastfoodIcon from '@material-ui/icons/Fastfood';
import LaptopMacIcon from '@material-ui/icons/LaptopMac';
import HotelIcon from '@material-ui/icons/Hotel';
import RepeatIcon from '@material-ui/icons/Repeat';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import axios from 'axios';

const useStyles = makeStyles((theme) => ({
    formControl: {
        margin: theme.spacing(1),
        minWidth: 120,
    },
    selectEmpty: {
        marginTop: theme.spacing(2),
    },
}));

const NewModule = () => {
    const classes = useStyles();
    const [state, setState] = useState({});
    const [moduleid, setModuleId] = useState(0);
    const [moduletype, setModuleType] = useState("");
    const [modulename, setModuleName] = useState("");
    const [duration, setDuration] = useState(0);

    const [dropdown, setDropdown] = useState([]);
    useEffect(() => {
        axios.get("http://localhost:8083/getmoduletypes")
            .then(res => {
                setDropdown(res.data)
            })
            .catch(error => {
                console.log(error)
            });
    }, []);
const handleDropdownChange = (event) => {
        const name = event.target.name;
        setDropdown({
            ...dropdown,
            [name]: event.target.value,
        });
    };
    const handleChangeModuleType = (event) => {
        const name = event.target.name;
        setModuleType({
            ...moduletype,
            [name]: event.target.value,
        });
    };
    const handleChangeDuration = (event) => {
        const name = event.target.name;
        setDuration({
            ...duration,
            [name]: event.target.value,
        });
    };
    state = {moduleid, moduletype, modulename, duration};
    const submitHandler = (e) => {
        e.preventDefault();
        axios.post("http://localhost:8083/createmodule", state)
        .then( response => {
            console.log(response)
        })
        .catch( error => {
            console.log(error)
        })
        console.log(moduletype);
    }
    return (
        <div class="container">
            <div class="row" style={{ width: "350px", marginTop: "20px", marginLeft: "30px", height: "450px" }}>
                <div>
                    <Icon color="primary"><b>+ Add New Module</b></Icon>
                </div>
                <FormControl variant="outlined" onSubmit={submitHandler }>
                    <InputLabel id="demo-simple-select-outlined-label" >Choose Module Type</InputLabel>
                    <Select
                        labelId="demo-simple-select-outlined-label"
                        id="demo-simple-select-outlined"
                        onChange={() => handleDropdownChange}
                        label="TypeList"
                    >
                        {
                            dropdown.map(options =>
                            <MenuItem value={options["module_type"]} >{options["module_type"]}</MenuItem>
                        )}
                    </Select>


                    <TextField
                        style={{ marginTop: "10px" }}
                        id="outlined-helperText"
                        label="Module Name"
                        onChange={handleChangeModuleType}
                        variant="outlined"
                    />
                    <TextField
                        style={{ marginTop: "20px" }}
                        id="outlined-helperText"
                        label="Course Duration"
                        onChange={handleChangeDuration}
                        variant="outlined"
                    />
                    <div style={{ margin: "auto", marginTop: "20px" }}>
                        <button type="submit" class="btn btn-success" >ADD</button>

                    </div>
                </FormControl>
            </div>
        </div>

    )
}
export default NewModule;

import React，{useState，useffect}来自“React”
从“@material ui/core/Icon”导入图标；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core”导入{TextField}；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入Select；
从“@material ui/core/NativeSelect”导入NativeSelect；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/lab/Timeline”导入时间线；
从“@material ui/lab/TimelineItem”导入TimelineItem；
从“@material ui/lab/TimelineSeparator”导入TimelineSeparator；
从“@material ui/lab/TimelineConnector”导入TimelineConnector；
从“@material ui/lab/TimelineContent”导入TimelineContent；
从“@material ui/lab/TimelineOppositeContent”导入TimelineOppositeContent；
从“@material ui/lab/TimelineDot”导入TimelineDot；
从“@material ui/icons/Fastfood”导入FastfoodIcon；
从“@material ui/icons/LaptopMac”导入LaptopMacIcon；
从“@material ui/icons/Hotel”导入HotelIcon；
从“@material ui/icons/Repeat”导入RepeatIcon；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“axios”导入axios；
const useStyles=makeStyles（（主题）=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
选择空：{
marginTop：主题。间距（2），
},
}));
const NewModule=（）=>{
const classes=useStyles（）；
const[state，setState]=useState（{}）；
常量[moduleid，setModuleId]=useState（0）；
常量[moduletype，setModuleType]=useState（“”）；
常量[modulename，setModuleName]=useState（“”）；
const[duration，setDuration]=useState（0）；
const[dropdown，setDropdown]=useState（[]）；
useffect（（）=>{
axios.get（“http://localhost:8083/getmoduletypes")
。然后（res=>{
设置下拉列表（分辨率数据）
})
.catch（错误=>{
console.log（错误）
});
}, []);
常量handleDropdownChange=（事件）=>{
const name=event.target.name；
设置下拉列表({
…下拉列表，
[名称]：event.target.value，
});
};
常量handleChangeModuleType=（事件）=>{
const name=event.target.name；
setModuleType({
…模块类型，
[名称]：event.target.value，
});
};
常量handleChangeDuration=（事件）=>{
const name=event.target.name；
设定持续时间({
期间
[名称]：event.target.value，
});
};
状态={moduleid，moduletype，modulename，duration}；
常量submitHandler=（e）=>{
e、 预防默认值（）；
axios.post（“http://localhost:8083/createmodule“，国家）
。然后（响应=>{
console.log（响应）
})
.catch（错误=>{
console.log（错误）
})
console.log（moduletype）；
}
返回(
+添加新模块
选择模块类型
handleDropdownChange}
label=“TypeList”
>
{
dropdown.map（选项=>
{options[“module_type”]}
)}
添加
)
}
导出默认新模块；

请让我知道如何发布相同格式的数据。OnChangeHandler是否适用于所有内容

---

谢谢大家!

您希望将组件封装在表单元素中，如下所示，然后定义handleSubmit函数（或您可能想调用的任何函数）

在handleSubmit中，您可以使用fetch将表单数据以您想要的任何格式发送到API。我通常使用JSON.stringify（）将数据转换为JSON字符串，类似于您的需求

    return (
    <div class="container">
      <form onSubmit={handleSubmit}>
        <div class="row" style={{ width: "350px", marginTop: "20px", marginLeft: "30px", height: "450px" }}>
            <div>
                <Icon color="primary"><b>+ Add New Module</b></Icon>
            </div>
            <FormControl variant="outlined" onSubmit={submitHandler }>
                <InputLabel id="demo-simple-select-outlined-label" >Choose Module Type</InputLabel>
                <Select
                    labelId="demo-simple-select-outlined-label"
                    id="demo-simple-select-outlined"
                    onChange={() => handleDropdownChange}
                    label="TypeList"
                >
                    {
                        dropdown.map(options =>
                        <MenuItem value={options["module_type"]} >{options["module_type"]}</MenuItem>
                    )}
                </Select>


                <TextField
                    style={{ marginTop: "10px" }}
                    id="outlined-helperText"
                    label="Module Name"
                    onChange={handleChangeModuleType}
                    variant="outlined"
                />
                <TextField
                    style={{ marginTop: "20px" }}
                    id="outlined-helperText"
                    label="Course Duration"
                    onChange={handleChangeDuration}
                    variant="outlined"
                />
                <div style={{ margin: "auto", marginTop: "20px" }}>
                    <button type="submit" class="btn btn-success" >ADD</button>

                </div>
            </FormControl>
        </div>
      </form>
    </div>

)

返回(
+添加新模块
选择模块类型
handleDropdownChange}
label=“TypeList”
>
{
dropdown.map（选项=>
{options[“module_type”]}
)}
添加
)

---

}

我的回答是否帮助您走上了正确的道路？