我在使用React native，并且 我有一個回圈，其中顯示了一些屬性型別。
我只為它創建了一個狀態，因為屬性型別是從資料庫中獲取的。 我想做的是選擇顯示它們。請告訴我實作它的方法。
const [propBCol, setPropBCol] = useState('#EDEDEE'/span>) 。
const [propTCol, setPropTCol] = useState('#000000') 。
{propType.map((item, index) =>/span> {
return (
<TouchableOpacity style={{}。
backgroundColor: propBCol,
...ListingFilterStyles.filterAnyBtn。
...ListingFilterStyles.btnMale。
}}
onPress={() => proptypes(item)}>
<Text style={{color:/span> propTCol}>/span>{item. value}</Text>。
</TouchableOpacity>
);
})}
propTypes函式：
const proptypes = item => {
setPropBCol（'red'）。
setPropTCol('White')
}
在這里輸入代碼
我怎樣才能改變所選專案的顏色，通過上面的代碼，所有專案的顏色都被改變了
uj5u.com熱心網友回復： 。const [propBCol, setPropBCol] = useState('#EDEDEE'/span>) 。
const [propTCol, setPropTCol] = useState('#000000') 。
const [selected, setSelected] = useState（[]）。
{propType.map((item, index) =>/span> {
return (
<TouchableOpacity style={{}。
backgroundColor: selected.includes（index） ? propBCol ： item.propBCol,
...ListingFilterStyles.filterAnyBtn。
...ListingFilterStyles.btnMale。
}}
onPress={() => proptypes(index)}>
<Text style={color: selected.including(index) ? propTCol : item.propTCol}}>{item.value}</Text>/span>
</TouchableOpacity>/span>
);
})}
const proptypes = (index) => {
setSelected(span class="hljs-params">prev => {
return[
...prev,
索引
]
})
}uj5u.com熱心網友回復：
你不應該為你所接收的每一個propType宣告一個狀態。你可以做的是，你可以在你收到的物件中添加一個鍵，并將其保存在狀態中。
并且在按下時，你可以使用陣列的簡單索引值來改變檢查的鍵的值。你必須在方法中傳遞資料，并按以下方式撰寫方法
。const propsTypes=（item, index）=> {
var propTypesVar = [...propTypes] 。
propTypesVar[index].propBCol= <<Your desired color> >
propTypesVar[index].propTCol= <<Your desired color>>
setPropType(propTypesVar)
}
之后，propBCol的值將在你的propType陣列的物件中，你可以渲染任何東西來向用戶顯示該值是否被選中，即
。{propType.map((item, index) => /span> {
return (
<TouchableOpacity>
style={{}。
backgroundColor: item.propBCol,
...ListingFilterStyles.filterAnyBtn。
...ListingFilterStyles.btnMale。
}}
onPress={() => proptypes(item)}>
<Text style={{color:/span> item. propTCol}}>{item.value}</Text>
</TouchableOpacity>/span>
);
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/309149.html
標籤：