反应地图中特定于本机的样式项
反应地图中特定于本机的样式项
提问于 2018-05-10 23:16:51
我有这个代码，它生成来自API的按钮大小，比如(al，l，m，s ... )我需要把一个特定的样式，当用户点击一个圆圈，我已经尝试了这段代码，但它使相同的样式为所有的圆圈，我需要改变一个圆圈的样式，当点击它：
<View style={{ paddingTop: 10, width: "49%" }}>
<View style={styles.sizeView}>
<View style={styles.sizeView3}>
<Text style={styles.chartText}>{t("size")}</Text>
</View>
</View>
<View style={styles.sizeButtons}>
{this.state.productsList[0].sizes.map((item, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => this.toggle1(item)}
style={
!this.state.pressStatus
? styles.sizes
: styles.sizesAlt
}
onHideUnderlay={this._onHideUnderlay.bind(this)}
onShowUnderlay={this._onShowUnderlay.bind(this)}
>
<Text
key={index}
style={
!this.state.toggle1 ? {} : { color: "#EC1C24" }
}
>
{item}
</Text>
</TouchableOpacity>
);
})}
</View>
</View>
我拖拽图片查看结果
Stack Overflow用户
发布于 2018-05-11 00:18:35
问题是您使用一个变量来更改所有按钮(this.state.toggle1)的切换状态，所以如果切换一个按钮，它们都将被切换，因为我不认为这是预期的行为。我建议为按钮创建一个纯组件，以便每个按钮都有自己的状态，并独立地处理切换。
至于风格，它们是2个语法工作：
style={ !this.state.toggle ? {} : { color: "#EC1C24", backgroundColor: 'red' }}或
style={[ this.state.toggle && {color: "#EC1C24", backgroundColor: 'red'} ]}因此，首先为圆形按钮创建一个组件
export class CircleButton extends Component {
constructor(props) {
super(props);
this.state = {
toggled: false
};
}
render() {
return (
<TouchableOpacity
key={index}
onPress={() => this.toggle1(item)}
style={
!this.state.pressStatus
? styles.sizes
: styles.sizesAlt
}
onHideUnderlay={this.props.onHideUnderlay.bind(this)}
onShowUnderlay={this.props.onShowUnderlay.bind(this)}
>
<Text
key={index}
style={
!this.state.toggle ? {} : { color: "#EC1C24" }
}
>
{item}
</Text>
</TouchableOpacity>
);
}
}并将您的视图更改为如下所示
<View style={{ paddingTop: 10, width: "49%" }}>
<View style={styles.sizeView}>
<View style={styles.sizeView3}>
<Text style={styles.chartText}>{t("size")}</Text>
</View>
</View>
<View style={styles.sizeButtons}>
{this.state.productsList[0].sizes.map((item, index) => {
return (
<CircleButton
onHideUnderlay={this._onHideUnderlay.bind(this)}
onShowUnderlay={this._onShowUnderlay.bind(this)}/>
);
})}
</View>
</View>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50276237
复制相关文章
相似问题
腾讯云开发者
