![](/img/trans.png)
[英]How do you toggle the checked value of a radio button in react using hooks?
[英]how do you single select change the value when the radio button is checked, using react hooks?
有两张问卷列表卡,每张都有一个问卷id和几个question_choice_id,当单选按钮被选中时,根据quisioner_id只能select一个question_choice_id,如何将quisioner_id和question_choice_id添加到react hooksEFZ上的Z9ED39E2EA931586B57A985A694上?
所以这个假设是这样的
choice_id: [1,1], question_id: [2,4]
手柄已选function
const handleSelected = (choiceId, questionId) => {
setQuestion(questionId)
setChoice(choiceId)
console.log(questionId, choiceId)
}
处理提交 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>
您可以使用 React 中的 useState() 挂钩来保存 state 中的 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)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.