我试图更改数组中对象列表中按钮的颜色。但不是更改1个按钮的颜色,而是更改每个按钮的颜色。在日志中,只有1个项目为真,但仍然有按钮的颜色也在更改。我基本上是在用户单击按钮时添加了1个属性,并将该特定属性设置为真。
模拟数据格式
export const UsageDataMock1 = [
{
id : 1,
title : 'Name',
},
{
id : 2,
title : 'Place',
},
{
id : 3,
title : 'Animal',
},
{
id : 4,
title : 'Thing',
},
{
id : 5,
title : 'Monkey',
}
]
父组件
const Usage = () => {
const [data, setData] = useState(UsageDataMock1);
let qwe = []
const invoiceTitleRef = [];
const onChange = (index, selectedTitle) => {
// console.log('Selected Title => ', invoiceTitleRef[index].getSelectedTitle())
console.log('selection ',invoiceTitleRef[index])
const tempSelection = invoiceTitleRef[index].getSelectedTitle()
setData(data.map((item, index) => {
if(item.title == tempSelection)
{
return ({...item, isSelected : 'true'})
}
else return ({...item, isSelected : 'false'})
}))
}
console.log('123', data)
return (
<AppBackground>
<View style = {{flexDirection : 'row', marginTop : 50}}>
{data.map((item, index) => (
<>
{console.log('asd', item, invoiceTitleRef[index])}
<InvoiceTitle
ref={(element) => invoiceTitleRef[index] = element}
key={item.id} title={item.title} selected = {item?.isSelected}
onChange={onChange} index={index} />
</>
))}
</View>
</AppBackground>
)
}
const styles = StyleSheet.create({
container : {
flexDirection : 'row',
marginTop : 40,
},
titleContainer : {
marginHorizontal : 10,
alignSelf : 'flex-start',
paddingHorizontal : 10,
paddingVertical : 8,
borderRadius : 12,
}
})
export default Usage
子组件
const InvoiceTitle = forwardRef(({
title,
onChange,
index,
key,
selected = false,
...props
}: InvoiceTitleProps, ref) => {
useImperativeHandle(ref, () => ({
getSelectedTitle : () => title
}))
const [color , setColor] = useState('white')
const onClick = () => {
onChange(index, title)
}
return (
<Pressable
key = {key}
onPress={() => onClick()}
style = {({pressed}) => [styles.titleContainer,
{backgroundColor : selected ? 'red' : 'blue', opacity : pressed ? 0.5 : 1}]}>
<AppText>{title}</AppText>
</Pressable>
)
})
const styles = StyleSheet.create({
container : {
flexDirection : 'row',
marginTop : 40,
},
titleContainer : {
marginHorizontal : 10,
alignSelf : 'flex-start',
paddingHorizontal : 10,
paddingVertical : 8,
borderRadius : 12,
}
})
export default InvoiceTitle
interface InvoiceTitleProps {
title : string,
onChange : Function,
index : number,
selected : boolean,
key? : number
}
1条答案
按热度按时间bweufnob1#
你可以试试这个
并替换此行