首頁猿問將局部變量傳遞給 React...

將局部變量傳遞給 React Native 中的組件

JavaScript

富國滬深 2023-07-14 10:40:15

我正在構建一個待辦事項列表應用程序，我想長按各個待辦事項，將其顏色更改為綠色，以便將它們標記為已完成。我的 App.js 內部有一個var color = 'white';組件，還有另一個名為 listItem 的組件用于列表項。我有這個非?；镜墓δ軄砀淖冾伾玞onst longPressHandler = () => { (color == 'white') ? color = 'green' : color = 'white'; }我正在發送colorlistItem 的 via 屬性<ListItem item={item} longPressHandler = {longPressHandler} color={color} pressHandler = {pressHandler}/>我按如下方式使用它backgroundColor: props.color檢查如下：const styles = StyleSheet.create({ listItem:{ padding: 8, margin:4, fontSize: 18, textAlignVertical:'center', borderColor:'gray', borderWidth: 3, borderStyle: 'solid', borderRadius:10, backgroundColor: props.color, } })但是，它不起作用...我做錯了什么？有沒有我缺少的簡單解決方案...

查看完整描述

2 回答

搖曳的薔薇

TA貢獻1793條經驗獲得超6個贊

您可以對代碼進行一些更改

將顏色選擇移至 ListItem 并傳遞一個 prop 來決定
無需在項目本身內創建整個樣式，您可以傳遞要覆蓋的樣式

因此，要執行此操作，您必須從列表項開始

<TouchableOpacity

? onLongPress={() => props.longPressHandler(props.item.key)}

? onPress={() => props.pressHandler(props.item.key)}>

? <Text

? ? style={[

? ? ? // this will make sure that only one style object is created

? ? ? styles.listItem,

? ? ? { backgroundColor: props.marked ? 'green' : 'white' },

? ? ]}>

? ? {props.item.todo}

? </Text>

</TouchableOpacity>

并且您的長按處理程序應如下所示更改，這會將標記的屬性設置為您用來決定上面顏色的狀態

? const longPressHandler = (key) => {

? ? const updatedTodos = [...todos];

? ? const item = updatedTodos.find((x) => x.key == key);

? ? item.marked = !item.marked;

? ? setTodos(updatedTodos);

? };

反對回復 2023-07-14

拉風的咖菲貓

TA貢獻1995條經驗獲得超2個贊

試試這個方法

const longPressHandler = (index) => {

const newTodos = [...todos];

newTodos[index].color = (newTodos[index].color && newTodos[index].color == 'green') ? 'white' : 'green';

setTodos(newTodos);

}

<FlatList

data={todos}

renderItem={( {item, index} ) => (

<ListItem

item={item}

index={index}

longPressHandler = {longPressHandler}

color={item.color || 'white'}

pressHandler = {pressHandler}

)}

export default function ListItem(props) {

return (

<TouchableOpacity onLongPress={() => props.longPressHandler(props.index)} >

.....

</TouchableOpacity>

)

}

注意：您必須將索引從 renderItem 傳遞到 ListItem，并從 ListItem 傳遞到 longPressHandler 函數

反對回復 2023-07-14

2 回答
0 關注
168 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將局部變量傳遞給 React Native 中的組件

將局部變量傳遞給 React Native 中的組件

2 回答

添加回答