所以我有一个API。我必须深入研究它,因此我首先映射所有响应数据,然后在其中进行另一个映射以获取对象(QUIZ答案(。所有这些都很好。但是,当您单击一个广播框时,它不会从Yes/否切换,而是单击并保持单击。现在,我知道如何正常处理此问题,并将项目状态设置为True或false,但是在这种情况下,这些项目是通过循环地图生成的。
当它们被循环项目时,我该如何改变他们的状态?
代码:
this.quizData = this.state.quiz_data.map((item, id) => {
return (
<div key={id}>
<h3 className='quiz-question'>{item.Title}</h3>
<p>{item.Question}</p>
<div className='quiz-answer-wrapper'>
<div className='quiz-answer-option'>
{this.quizAnswers = item.PreQualifyingAnswerDefinitions.map((item, id) => {
return (
<fieldset className='quiz-radio-label' key={id}>
<input type='radio' value='value' onChange={() => value('')} />
{item.Answer}
</fieldset>
)
})}
</div>
</div>
</div>
)
})
您可以使用事件处理程序参数。而不是通过() => value('')
覆盖onChange
,而是通过e => value(e)
。除此之外,每个无线电输入均为name
,此name
通过事件处理程序传递。
在旁注上,我会为您的value
功能使用其他名称,也许是handleAnswerRadio
。
此文档可能有助于清除一些内容。
这是一些代码,可以向您显示映射的无线电输入。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
radioInputs: [
{ name: 'radio_1', checked: false },
{ name: 'radio_2', checked: false },
{ name: 'radio_3', checked: false },
{ name: 'radio_4', checked: false },
{ name: 'radio_5', checked: false }
]
}
}
handleAnswerRadio = (e) => {
let newRadios = JSON.parse(JSON.stringify(this.state.radioInputs))
newRadios.map(item => {
item.checked = item.name === e.target.name
return item
})
this.setState({
radioInputs: newRadios
})
}
render() {
return (
<div>
{this.state.radioInputs.map((item, index) => (
<div>
{item.name}
<input key={item.name} name={item.name} type="radio"
checked={item.checked}
onChange={e => this.handleAnswerRadio(e)}/>
</div>
))}
</div>
)
}
}
ReactDOM.render((<App/>), document.getElementById('testing'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="testing"></div>