ボタン・プレスでの小道具の再レンダリング

Question

更新＃2：私はJSFiddleにLinksScreenとTimelineDayのコードを掲載しました。すみませんでした。

更新：私のコードは、の提案を使用して再構成しました。私は現在、コンポーネントTimelineDayの小道timelineDataを更新し、LinksScreenクラスを再描画しようとしています。しかし、私のテストでは何も起こりません。私は州/小道具にはとても新しいので、アドバイスをいただければ幸いです。

非常に新しいReact/JS（初心者向けの警告）。ヘッダー内の

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: [. . ], 
    } 
} 

ボタンが付きtimelineData小道具を更新するために、カスタムonPressX機能を持っている

クラスLinksScreenはフレキシボックスの小道具と意見や外部コンポーネントが含まれています。..さんは私の問題の肉の一部に取得してみましょう対応する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> 

これらは、子どもが適切な配列

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

とtimelineDataを支える再割り当て私はSETSTATE（）を呼び出すことで、再レンダリング、ことを推測しています、対応するボタンの機能ですとも呼ばれます。しかし、これはこれは私がボタンをクリックすると、小道具の再割り当て時に再レンダリングしていることを望むTimelineDayコンポーネントとtimelineData小道具が含まれている方法である..私は私のテストでは観察困難が生じています何

です。

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

これはおそらく非常に治療上の問題ですが、私（および私の大学のハッカソン指導部チーム）にはさらに明確な説明が必要です。

参考になるリソース（Flux、statesなど）は自由に削除してください。ありがとうございました！

Answer 1

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

はあなたがここにあなたのコンポーネントの初期状態を設定したい、あなたがprops.stringをどうするつもりかわからない、あなただけの空の文字列に設定することができます。

"propを更新するためのアクションのテスト..."実際には状態を更新しようとしていますが、setStateを使用して小道具を更新することはできません。

反応のファンダメンタルズをもう少し見直すと、あなたに役立ちます。

Answer 2

ここには少し奇妙なことがいくつかあります。私はwhataday2のあなたのボタンが動作すると推測します。

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

と

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

プロパティでたonPressにオブジェクトを置くこと以外何もしていません 'whatDay'。しかし、このボタンはあなたが作成した実際の関数を渡します、それはそれを行う正しい方法です。

<TouchableHighlight onPress={this.onPress}> 

はまた、あなたたonPress機能にSETSTATEを返す必要はありません、これらのtouchablesのそれぞれは、まさにたonPressボタンコールを実行しています。もし、あんたが。これを適切に行うには2つの方法があります。最初に、それぞれのwhatday呼び出しに対して1つの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"}> 

少なくともFluxまたはReduxパターンを適用してください。Fluxは、小さなもので簡単にピックアップすることができます。これらのパターンのいずれかを使用すると、すべての状態がコンポーネントにリンクされていないどこかに格納され、管理が容易になります。