Как вы можете выбрать один раз, чтобы изменить значение при установленном переключателе, используя перехватчики реакции? - PullRequest
Новая
       48

Как вы можете выбрать один раз, чтобы изменить значение при установленном переключателе, используя перехватчики реакции?

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

есть две карточки списка вопросников, каждая из которых имеет questionnaire_id и несколько question_choice_id, когда выбран переключатель, он может выбрать только один question_choice_id на основе quisioner_id, как добавить quisioner_id и question_choice_id в состояние при реакции хуки?

поэтому это предположение будет таким 

choice_id: [1,1], question_id: [2,4]

handleSelected function 

const handleSelected = (choiceId, questionId) => {
setQuestion(questionId)
setChoice(choiceId)

console.log(questionId, choiceId)

}

handleSubmit function 

const handleSubmit = (e) => {
const choice_id = choiceId
const question_id = questionId

const quisioner = {
  choice_id,
  question_id
}

e.preventDefault()
api.post('api/questionnaire/response', quisioner, { 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}
                                checked={res.choice_id ?  selected : null }
                                onChange={() => handleSelected(res.choice_id, item.question_id)}
                              />
                            </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

Вы можете использовать хук useState () из React, чтобы удерживать quisionerId, questionChoiceId в состоянии. 

 [quisionerId,setQuisionerId] = React.useState("");
 [questionChoiceId,setQuestionChoiceId] =React.useState("");

 //On handle selected
 const handleSelected = (choiceId, questionId) => {
   setQuisionerId({choice_id : choiceId, question_id : questionId);
   setQuestionChoiceId(choiceId)     
 }
...