[英]How to correctly map over a React element with separate radio button form elements?
我正在尝试创建卡元素,用户可以在图像上对“是”,“否”或“也许”进行投票。 现在,它正像单选按钮一样读取一幅图像的90个选项,而不是30个具有3个选项的单个图像。 如何在每张卡上映射,以便表单特定于图像? 该数组将显示为
{ userChoices: {
characterName[0]:choice.value,
characterName[1]:choice.value,
....
}}
const choiceCard = characterData.map((character, key) =>
<div className="col-sm-12 col-md-3" id="choiceCard" key={character.id}>
<div id="choiceContent">
<img src={character.statusImage}/>
<div id="choice-inner" className="form">
<span>{character.name}</span>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="yes"
id="yes"
value="yes"/>
<label class="form-check-label" for="yes">
Yes
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="no"
id="no"
value="no"/>
<label class="form-check-label" for="no">
No
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="maybe" id="maybe" value="maybe"/>
<label class="form-check-label" for="maybe">
Maybe
</label>
</div>
</div>
</div>
</div>
);
您已接近要去的地方,这里只需要处理两件事:
这是受控组件的自然使用案例。 受控的单选按钮将如下所示:
<input
key={someID}
type="radio"
value={choice}
checked={this.state.choice === choice}
onChange={() => this.handleChange(choice)}
/>
使用变更处理程序:
handleChange = newChoice => {
this.setState({
choice: choice
});
}
(请参阅https://reactjs.org/docs/forms.html )
将其应用于您的问题,您将得到如下结果:
const choices = [
"Yes",
"No",
"Maybe"
]
const choiceCard = characterData.map((character, key) => {
return (
<label key={character.id}>
{character.name}
{choices.map(choice => {
return (
<input
key={choice}
type="radio"
value={choice}
checked={this.state.userChoices[key] === choice}
onChange={() => this.handleChange(choice, key)}
/>
);
})}
</label>
);
});
以及以下更改处理程序:
handleChange = (choice, key) => {
this.setState(prevState => ({
userChoices: { ...prevState.userChoices, [key]: choice }
}));
};
这是一个快速而肮脏的Codepen,您可以使用它来帮助您理解: https ://codepen.io/anon/pen/axzMxm?editors=0010
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.