第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

富國(guó)滬深 2023-07-14 10:40:15
我正在構(gòu)建一個(gè)待辦事項(xiàng)列表應(yīng)用程序，我想長(zhǎng)按各個(gè)待辦事項(xiàng)，將其顏色更改為綠色，以便將它們標(biāo)記為已完成。我的 App.js 內(nèi)部有一個(gè)var color = 'white';組件，還有另一個(gè)名為 listItem 的組件用于列表項(xiàng)。我有這個(gè)非?；镜墓δ軄?lái)改變顏色const longPressHandler = () => {    (color == 'white') ? color = 'green' : color = 'white';  }我正在發(fā)送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,          }    })但是，它不起作用...我做錯(cuò)了什么？有沒(méi)有我缺少的簡(jiǎn)單解決方案...
查看完整描述

2 回答

?
搖曳的薔薇

TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊

您可以對(duì)代碼進(jìn)行一些更改

  1. 將顏色選擇移至 ListItem 并傳遞一個(gè) prop 來(lái)決定

  2. 無(wú)需在項(xiàng)目本身內(nèi)創(chuàng)建整個(gè)樣式，您可以傳遞要覆蓋的樣式

因此，要執(zhí)行此操作，您必須從列表項(xiàng)開(kāi)始

<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>

并且您的長(zhǎng)按處理程序應(yīng)如下所示更改，這會(huì)將標(biāo)記的屬性設(shè)置為您用來(lái)決定上面顏色的狀態(tài)


? const longPressHandler = (key) => {

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

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

? ? item.marked = !item.marked;

? ? setTodos(updatedTodos);

? };

查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
拉風(fēng)的咖菲貓

TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊

試試這個(gè)方法


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 函數(shù)


查看完整回答
反對(duì) 回復(fù) 2023-07-14
  • 2 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)