0

我想有一个表格，我有这样的嵌套字段。

const [quizes, setQuizes] = useState(
  [

    
  { id: uuidv4(), question: '', answer: '', answer_choices:['']},
  ]
);

我可以为测验动态附加输入但是我遇到了 answer_choices 问题，我想为选项添加一个字段，当我输入选项时，它应该将其推送到 answer_choices 并且我希望能够删除选项也是。当我单击添加选择按钮时，它应该能够添加一个字段供我输入选择，并自动将其附加到我的答案 - 选择

这就是我处理输入的内容。

        const handleChangeInput = (id, event) => {
  const newInputFields = quizes.map(i => {

    if(id === i.id) {
      i[event.target.name] = event.target.value
      // i.answer_choices.push(choices)
    }
    return i;
  })
  
  setQuizes(newInputFields);
}


const handleAddFields = () => {
  
  setQuizes([...quizes, { id: uuidv4(),  question: '', answer: '' , answer_choices:['']}])
}



 

const handleRemoveFields = id => {
  const values  = [...quizes];
  values.splice(values.findIndex(value => value.id === id), 1);
  setQuizes(values);
}

这就是我正在渲染的

    return (
    <Grid>
      <Paper elevation={5} style={paperStyle}>

      {console.log(quizes)}

      <Typography>Add an assignment</Typography>

        <form className={classes.root} onSubmit ={submitHandler}>
          <div>
            
          </div>
            <TextField 
              type="title"
              value={title}
              placeholder="Enter title"
              onChange={(e) => setTitle(e.target.value)} 
              label='Title'
              style={{marginTop:30}} 
              variant='filled'
              />
      
          { quizes.map((inputField, index) => (
              <div key={inputField.id}>
                <TextField
                  size='small'
                  name="question"
                  label="Question"
                  variant="filled"
                  value={inputField.question}
                  onChange={event => handleChangeInput(inputField.id, event)}
                />
               
                <Grid  elevation={5}>


                <Typography>please enter Correct answer</Typography>
                <TextField
                  size='small'
                  name="answer"
                  label="Answer"
                  variant="filled"
                  value={inputField.answer}
                  onChange={event => handleChangeInput(inputField.id, event)}
                />


              {inputField.answer_choices.map((choice, i)=>(
                
                <div style={{padding: '10px'}}>
                  
              <span style={{fontSize: '18px'}}>Choice : {i+1}</span>
              <TextField variant='outlined' name={choice} placeholder='Choices'
                onChange={e => handleChangeInput(inputField.id, e)} 
                value={inputField.answer_choices.choice}
              /> 
              <Button variant='contained' color='secondary' style={{marginLeft: '10px'}} 
                onClick={() => inputField.answer_choices.remove(i)}
              >Delete</Button>


            <Button variant='contained' color='primary' onClick={inputField.answer_choices.push(i)}>Add Choices</Button>
              </div>

              
              
              ))}
                </Grid>
                <IconButton disabled={quizes.length === 1} onClick={() => handleRemoveFields(inputField.id)}>
                  <RemoveIcon />
                </IconButton>
                <IconButton
                  onClick={handleAddFields}
                >
                  <AddIcon />
                </IconButton>
              </div>
              )) }
  

              <Button
              className={classes.button}

              variant="contained" 
              color="primary" 
              type="submit"
              // onClick={handleSubmit}
              >Submit</Button>


        </form> 
        </Paper>
    </Grid>
)
4

0 回答 0