将单选按钮值更改为文本输入的值

Question

你如何获得值并且可以从单选按钮替换值？ 我有这样的json：

"data": [
    {
        "question_id": 1,
        "question": "test questioner 1",
        "question_choice": [
            {
                "choice_id": 1,
                "choice": "choice 1.1"
            },
            {
                "choice_id": 2,
                "choice": "choice 1.2"
            }
        ]
    },
    {
        "question_id": 2,
        "question": "test questioner 2",
        "question_choice": [
            {
                "choice_id": 3,
                "choice": "choise 2.1"
            },
            {
                "choice_id": 4,
                "choice": "choise 2.2"
            },
            {
                "choice_id": 5,
                "choice": "choise 2.3"
            }
        ]
    }
]

因此，当单击单选按钮时，它应该能够通过“question_id”将“choice_id”发送到函数 handleSelected。 期望是这样的：

const handleSelected = (e) => {
const data = { 
  vote_id: 1,
  question_id: [0, 1],
  choice_id: [0, 1]
}  

}

这是表单提交时处理的函数

const handleSubmit = (e) => {
  e.preventDefault()
  api.post('api/questionnaire/response', data, { headers: { 'Authorization': JSON.parse(storage.getItem('token')) } })
  .then(res => {
    console.log(res)
  })

}

这是一个带有列表提问者的组件

<Form className='w-100' onSubmit={handleSubmit}>
   <Row>
     {listQuisioner.map((item) => {
       return (
          <Col key={item.question_id} md={6} xs={12} className='mb-3'>
             <Card>
                <Card.Body style={{ position: 'relative' }}>
                   <h4 className='text-capitalize'>{item.question}</h4>
                   <div className='navbar-top-line mb-4'/>
                      {item.question_choice.map(res => {
                        return (
                          <fieldset key={res.choice_id} id={res.choice_id}>
                            <label className='text-capitalize'>{res.choice}</label>
                            <input 
                              type='radio' 
                              id={res.choice_id} 
                              value={res.choice_id} 
                              name={res.choice}
                              onChange={(e) => handleSelected(e)}
                            />
                          </fieldset>
                        )
                      })}
                    </Card.Body>
                  </Card>
                </Col>
              )
            })}
         <Col xs={12} className='p-3 mb-5'>
            <Button variant='danger' block type='submit'>
               <h5 className='mb-0'>Submit</h5>
             </Button>
          </Col>
        </Row>
     </Form>

Answer 1

您可以将 id 和值传递给句柄点击函数

onChange={(e) => handleSelected(e, res.choice_id, res.choice)}

然后在函数中处理

const handleSelected = (e, id, choice) => {
  const data = { 
  vote_id: 1,
  question_id: id
  choice_id: choice
}