React渲染道具數據按鈕在React

Question

更新＃2：我發佈的代碼在JSFiddle LinksScreen和TimelineDay。對不起，我沒有那麼早做！

UPDATE：我重新構建我的代碼使用的建議。我現在嘗試更新timelineData，在組件TimelineDay的道具和重新渲染LinksScreen類。但是，我的測試沒有任何反應。我對州/道具非常陌生，所以任何建議都會非常感謝。

很新的反應/ JS（新手警報）。讓我們來看看我的問題的肉部分..

類LinksScreen包含道具和Flexbox的意見外部組件

import TimelineDay from '../components/TimelineDay.js'; 

export default class LinksScreen extends React.Component { 
constructor() { 
    super(); 

    this.onPress1 = this.onPress1.bind(this); 
    this.onPress2 = this.onPress2.bind(this); 
    this.onPress3 = this.onPress3.bind(this); 

    this.state = { 
     dayOne: [ . . ], 
     dayTwo: [. . ], 
     dayThree: [. . ], 
    } 
} 

按鈕頭具有自定義onPressX功能更新timelineData道具與對應dayOne，dayTwo或dayThree數據。

render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.dayBar}> 
      <TouchableHighlight onPress={this.onPress1}> 
       <View> 
        <MaterialCommunityIcons name="numeric-1-box-outline" size={34} color="#FFD344"/> 
        <Text style={styles.day1Text}>Fri, 29th</Text> 
       </View> 
      </TouchableHighlight> 
      </View> 

這些是對應的按鈕的功能重新分配子丙timelineData與適當的陣列

onPress1 =() => { 
    this.setState({timelineData: this.state.dayOne}) 
}; 
onPress2 =() => { 
    this.setState({timelineData: this.state.dayTwo}) 
}; 
onPress3 =() => { 
    this.setState({timelineData: this.state.dayThree}) 
}; 

我猜測，通過調用的setState（），重新繪製也被稱爲。然而，這是我有困難遵守在我的測試..

這是一個包含了TimelineDay組件和timelineData道具，我希望在點擊按鈕已經重新呈現和道具重新分配的方法是什麼。

<View style={styles.eventScheduleView}> 
    <TimelineDay ref={(timelineData) => { 
     timelineData = this.state.timelineData}}> 
    </TimelineDay> 
</View> 

這可能是一個非常補救的問題，但我（和我大學的黑客馬拉松領導小組）需要額外的澄清。

隨意扔出去，將是有幫助的任何資源（流量，狀態等）。謝謝！

Answer 1

this.state= { 
    whatDay: props.string 
}; 

你想在這裏設置的初始狀態爲您的組件，不知道你打算與props.string做什麼，你可以將其設置爲空字符串。

「測試動作onPress到道具更新......」，其實你要更新狀態，道具不能使用的setState更新。

花多一點時間回顧一下基本面反應會對你有所幫助。

Answer 2

有你在這裏做一些事情是有點怪。我會冒險猜測你的按鈕爲whataday2的作品。

<TouchableHighlight onPress={{whatDay: "dayOne"}}> 

和

<TouchableHighlight onPress={{whatDay: "dayThree"}}> 

都沒有做，除了把一個物體進入onPress與物業什麼 'whatDay'。然而這個按鈕傳遞你創建的實際功能，這是正確的方法。

<TouchableHighlight onPress={this.onPress}> 

此外，也沒有必要在你的onPress函數返回的setState，這些touchables都只是執行onPress按鈕調用什麼。如果你。有兩種方法可以正確執行此操作，第一種方法是爲每個「每日」呼叫創建單個onPress呼叫，就像這樣。

onPressTwo =() => { 
    this.setState({ 
    whatDay: "dayTwo" 
    }); 
}; 

onPressThree =() => { 
    this.setState({ 
    whatDay: "dayThree" 
    }); 
}; 
.... 

並將每個按鈕傳遞給它們各自的按鈕。或者，您可以在每個按鈕中綁定onPress，並使onPress獲取一個變量。

onPress = (day) => { 
    this.setState({ 
    whatDay: day 
    }); 
}; 

這樣結合。

<TouchableHighlight onPress={this.onPress.bind(this, "dayThree"}> 

你應該看看施加至少通量或終極版模式，流量更容易被小事回暖。使用這些模式之一將允許將所有狀態存儲在與組件無關的地方，從而使事情更容易管理。