我正在尝试toggle
字体真棒图标被选中或不喜欢radio button
。我可以将其保存到toggle
,但是当我单击其中一个图标时,所有图标都会被切换。我只想toggle
被点击的那个。
export default class ItemDetails extends Component {
constructor() {
super();
this.state = {
items: [
{name: 'Bread Cheese', options: ['Monterrey Jack', 'Cheddar']},
{name: 'Combo Side', options: ['Fries', 'Sprouts', 'Sweet Potato Fries', 'Tots']},
{name: 'Sandwich Details', options: ['No Tomatoes', 'No sauce', 'Extra Cheese', 'Extra Onions']},
{name: "It's a wrap", options: ['gluten free', 'extra sauce', 'extra cheese', 'extra lettuce', 'extra pilaf']}
],
show: false,
};
toggle() {
this.setState({ show: !this.state.show });
}
renderRadioButton = (item) => {
let iconSolid = <Icon name="circle" color="darkgray" type='solid'/>,
iconLight = <Icon name="circle" color="darkgray" type='light'/>;
return (
<View>
{item.options.map(option =>
<ListItem selected={false} onPress={this.toggle.bind(this)}>
<View style={styles.icon}>
{this.state.show ? iconSolid : iconLight}
</View>
<Text style={styles.iconPadding}>{option}</Text>
</ListItem>)}
</View>
);
};
};
render() {
return(
<View style={styles.content}>
<View>{this.renderRadioButton(this.state.items[0])}</View>
</View>
)}
}
答案 0 :(得分:2)
首先,您需要为每个图标设置单独的标志。
由于依赖关系,我无法测试以下代码,但这是您可以做的:
constructor() {
super();
this.state = {
items: [
{ name: 'Bread Cheese', options: ['Monterrey Jack', 'Cheddar'] },
{ name: 'Combo Side', options: ['Fries', 'Sprouts', 'Sweet Potato Fries', 'Tots'] },
{ name: 'Sandwich Details', options: ['No Tomatoes', 'No sauce', 'Extra Cheese', 'Extra Onions'] },
{ name: "It's a wrap", options: ['gluten free', 'extra sauce', 'extra cheese', 'extra lettuce', 'extra pilaf'] }
],
show: {},
};
}
toggle(option) {
this.setState((prevState) => {
if (prevState.show[option]) {
return {
...prevState,
show: { ...prevState.show, [option]: !prevState.show[option] }
}
} else {
return {
...prevState,
show: { ...prevState.show, [option]: true }
}
}
});
}
renderRadioButton = (item) => {
let iconSolid = <Icon name="circle" color="darkgray" type='solid' />,
iconLight = <Icon name="circle" color="darkgray" type='light' />;
return (
<View>
{item.options.map(option =>
<ListItem selected={false} onPress={this.toggle.bind(this, option)}>
<View style={styles.icon}>
{this.state.show[option] ? iconSolid : iconLight}
</View>
<Text style={styles.iconPadding}>{option}</Text>
</ListItem>)}
</View>
);
};
让我知道这是否有帮助。