如何在React Js中的SELECT菜单中的值数量的基础上添加字段？

Question

在这里，我想在选择具有值1的菜单后从“选择菜单”传递值我拥有的同一字段，因此请帮助我摆脱这个问题，所有这些都是一个组件

import React from 'react'
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import NativeSelect from '@mui/material/NativeSelect';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
const CourseScheduleStep4 = () => {
    const [Session, setVal] = React.useState([]);
    // const handleChange = (event) => {
    //     setVal(event.target.value);
    // };

    const [inputList, setInputList] =  React.useState([{ class_date:"", class_start_time:"",class_end_time:"" }])

    const handleAddinput = (e) => {
        var count =e.target.value
        //console.log(e.target.value)
        setInputList([...inputList, [{ class_date:"" ,class_start_time:"" ,class_end_time:"" }]]);

        console.log(inputList ,"inputList")
      };
      
    return (
        <Box>
            <Box className="my-4">
            <Typography variant="h3" gutterBottom component="div" className="mb-0"> Set up your class schedule</Typography>
            <Typography variant="subtitle1" gutterBottom component="div" className="mb-0">Let your students know when the class will take place so they can plan accordingly</Typography>
            </Box>
             <Box ClassName="StepsForm">

             <FormControl className="selectDropdown w-100 mb-2">
                  <InputLabel shrink htmlFor="student-name" className="studentNameLabel">
                  How many Classes in this Course?
                  </InputLabel>
                    <Select sx={{ mb: 1 }} 
                    onChange={(e)=>handleAddinput(e)}
                    displayEmpty
                    className="StepsFields"
                    inputProps={{ 'aria-label': 'Without label' }}
                    >
                    <MenuItem value={1} className="d-block p-2">1</MenuItem>
                    <MenuItem value={2} className="d-block p-2">2</MenuItem>
                    <MenuItem value={3} className="d-block p-2">3</MenuItem>
                    <MenuItem value={4} className="d-block p-2">4</MenuItem>
                    </Select>
                   </FormControl>
  

{/ *这里我想根据所选的值添加值，并添加那么多的InputList */}

   {inputList?.map((x,i)=>(
                 <Box className="SessionClassDetails mb-2">
                 <Typography variant="h6" gutterBottom component="div" className="CourseHeadingss">CLASS SESSION {i} </Typography>
                 <FormControl variant="standard" className="w-100 my-2">
                    <InputLabel shrink htmlFor="student-name" className="studentNameLabel">
                    Class Date
                    </InputLabel>
                    <TextField sx={{ mb: 1 }} 
                        required
                        fullWidth
                        name="class_date"
                        id="name"
                        type="date"
                        variant="standard"
                        placeholder="Please Select"
                        className="StepsFields"
                        value={x.class_date}
                    />
                    </FormControl>
                 <FormControl variant="standard" className="w-100 my-2">
                    <InputLabel shrink htmlFor="student-name" className="studentNameLabel">
                    Class Start Time
                    </InputLabel>
                    <TextField sx={{ mb: 1 }} 
                        required
                        fullWidth
                        name="class_start_time"
                        id="name"
                        type="time"
                        variant="standard"
                        placeholder="Please Select"
                        className="StepsFields"
                        value={x.class_start_time}
                    />
                    </FormControl>
                 <FormControl variant="standard" className="w-100 my-2">
                    <InputLabel shrink htmlFor="student-name" className="studentNameLabel">
                    Class End Time
                    </InputLabel>
                    <TextField sx={{ mb: 1 }} 
                        required
                        fullWidth
                        name="class_end_time"
                        id="name"
                        type="time"
                        variant="standard"
                        placeholder="Please Select"
                        className="StepsFields"
                        value={x.class_end_time}
                    />
                    </FormControl>
                </Box>
  ))}

                <FormControl variant="standard" className="w-100 my-2">
                    <InputLabel shrink htmlFor="student-name" className="studentNameLabel">
                    Price per Student
                    </InputLabel>
                    <TextField sx={{ mb: 1 }} 
                        required
                        fullWidth
                        name="name"
                        id="name"
                        type="text"
                        variant="standard"
                        placeholder="$ 30.00"
                        className="StepsFields"
                    />
                </FormControl>
             <Box>
            <Typography variant="caption" display="block" gutterBottom  align='right' className="SubText policyInstructions"> *Subject to the sites cancellation policy.</Typography>
            </Box>
            </Box>
        </Box>
    )
}

export default CourseScheduleStep4

Answer 1

尝试一下

const handleAddinput = (e) => {
    var count = e.target.value;
    const currentLength = inputList.length;
    if (currentLength) {
        let newList = [];
        [...Array(count).keys()].forEach(() => {
            [...inputList].forEach(i => {
                newList.push({ ...i });
            })
        })
        setInputList(newList);
    } else {
        setInputList([...Array(count).keys()].map(i => ({ class_date: "" , class_start_time: "" , class_end_time:"" })));
    }
};