は、それは私が反応ネイティブアプリケーションを構築していると私は私の画面で</p> <p>を解決する方法がわからないこの問題イム渡って来ている親

Question

だと、私はスイッチを持っているどのコンポーネントから状態を渡すためにネイティブ・反応し押されたときに、関数を呼び出していること：これは正常に動作しているが、私は私の親に私の往復の機能の私の状態を変更しようとすると、私の問題が来る

function RoundTrip(props) { 
    console.log('value of round trip' + props.returnBool) 
    var roundTrip = props.returnBool; 
    if (roundTrip) { 
     console.log('return is true') 
    return <RoundTripTrue />; 
    } 
    console.log('return is false') 
    return <RoundTripFalse />; 

} 

function RoundTripFalse(props) { 
    return null 
} 

function RoundTripTrue(props) { 
    return (
     <View> 
         <CardSectionInput> 


        <Image 
         source={require('./../../src/images/dateIcon1.png')} 
         style={styles.IconStyle} 
        /> 
        <DatePicker 
       style={styles.DateStyle} 
       date={this.state.returnDate} 
       mode='date' 

       format="LL" 
       minDate= {currentDate} 
       maxDate="2018-06-01" 
       confirmBtnText="Confirm" 
       cancelBtnText="Cancel" 
       showIcon={false} 
       placeholder= 'Return Date' 
       customStyles={{ 
       dateInput: { 
        marginLeft: 2, 
        backgroundColor: 'white', 
        borderWidth: 1, 
        borderRadius: 5, 
        borderColor: 'white', 
        flex: 1, 
        flexDirection: 'row', 
       }, 
       dateText: { 
        flexDirection: 'row', 
        flex: 1, 
        backgroundColor: 'transparent', 
        color: 'black', 
       }, 
       placeholderText: { 
        color: '#c9c9c9', 
        alignSelf: 'center', 
        justifyContent: 'flex-start', 
        flex: 1, 
        flexDirection: 'row', 
        fontSize: 18, 

      } 
       }} 
       onDateChange={(returnDate) => {this.setState({returnDate: returnDate})}} 
      /> 


     </CardSectionInput> 


     <CardSectionInput> 


        <Image 
         source={require('./../../src/images/timeIcon.png')} 
         style={styles.TimeIconStyle}/> 

      <DatePicker 
       style={styles.DateStyle} 
       date={this.state.returnTime} 
       mode="time" 
       format="LT" 
       confirmBtnText="Confirm" 
       cancelBtnText="Cancel" 
       minuteInterval={20} 
       showIcon={false} 
       placeholder='Return Time' 
       onDateChange={(returnTime) => {this.setState({returnTime: returnTime});}} 
       customStyles={{ 
       dateInput: { 
        marginLeft: 2, 

        backgroundColor: 'white', 
        borderWidth: 1, 
        borderRadius: 5, 
        borderColor: 'white', 
        flex: 1, 
        flexDirection: 'row', 


       }, 
       dateText: { 
        flexDirection: 'row', 
        flex: 1, 
        backgroundColor: 'transparent', 
        color: 'black', 

       }, 
       dateTouchBody: { 
        flexDirection: 'row', 
        height: 40, 
        alignItems: 'center', 
        justifyContent: 'center', 
        flex: 1, 
        paddingTop: 5, 

       }, 
      placeholderText: { 
        color: '#c9c9c9', 
        alignSelf: 'center', 
        justifyContent: 'flex-start', 
        flex: 1, 
        flexDirection: 'row', 
        fontSize: 18, 

      } 
       }} 
       /> 

     </CardSectionInput> 

。

私の親では、私は<RoundTrip returnBool={this.state.roundTrip} /> を電話しています 私の機能は私の親の状態にアクセスできないと理解していますが、これに対処する方法はありません。

この問題は、ファイルをコンポーネントに分割しようとすると、この問題に直面しているため、RoundTrip関数に固有の問題ではありません。

オプションはプロパティによって親コンポーネントの往復部品コールバック関数を渡すことであるアドバンス

Answer 1

でいただきありがとうございます。

Roundtripコンポーネントは親コンポーネントに値を返すことができます。

<Roundtrip onChange={this.parentsMethodThatShallBeCalled} /> 

親のメソッドは、次のようになります。

function parentsMethodThatShallBeCalled(newValueFromRoundTrip) { 
    this.setState({roundtrip : newValueFromRoundTrip}); 

}