Измените значение радиокнопки на значение ввода текста - PullRequest
Новая
       50

Измените значение радиокнопки на значение ввода текста

0 голосов
/ 10 июля 2020

как получить значение и заменить его с помощью переключателя? У меня есть 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"
            }
        ]
    }
]

, поэтому при нажатии переключателя он должен иметь возможность отправить «choice_id» с помощью «question_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>

1 Ответ

0 голосов
/ 11 июля 2020

Вы можете передать идентификатор и значение в функцию щелчка дескриптора 

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
}
...