javascript - 当单选按钮被选中时,如何使用反应钩子单选更改值?
问题描述
问卷列表卡片有两张,每张卡片有一个questions_id和几个question_choice_id,当单选按钮被选中时,只能根据quisioner_id选择一个question_choice_id,如何将quisioner_id和question_choice_id添加到react hooks上的状态?
所以这个假设是这样的
choice_id: [1,1], question_id: [2,4]
处理选定函数
const handleSelected = (choiceId, questionId) => {
setQuestion(questionId)
setChoice(choiceId)
console.log(questionId, choiceId)
}
处理提交函数
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() 挂钩将 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)
}
推荐阅读
- python - 如何用 Python 替换列表中的空实例?
- python - 由于内存消耗,需要 PsychoPy 无法读取文档构建
- php - Twitter API 令牌请求返回 gobbledygook
- java - 将 XML 放入嵌套布局后,数学逻辑停止工作
- multithreading - Java 线程 - 同步的 don
- sharepoint - Apply-PnPProvisioningTemplate 警告
- jquery - 如何在 onmouseover 事件中从 ListView 获取图像索引?
- javascript - 保持 Material Slide Toggle 打开或关闭而不使用 disabled
- java - Cucumber - Java - Maven - 扩展报告 - 无法在报告中添加日期
- algorithm - 上限高峰时段游戏