Question

我正在构建一个React Native应用程序，我遇到了这个问题我不确定如何解决

在我的屏幕中，我有一个开关，当按下时，调用一个函数：

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函数的状态更改为我的父级时，我的问题出现了。

在我的父母那里，我打电话给<RoundTrip returnBool={this.state.roundTrip} /> 我知道我的功能无法访问我父母的状态，但我对如何解决这个问题感到迷茫。

此问题并非特定于我的RoundTrip函数，因为每当我尝试将文件分成组件时，我都会遇到此问题。

先谢谢你

Answer 1

一个选项是通过属性将Roundtrip组件传递给父组件的回调函数。

Roundtrip组件可以将值返回到父组件。

<Roundtrip onChange={this.parentsMethodThatShallBeCalled} />

父母的方法可能如下所示：

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

}

React Native-如何将状态从组件传递给它的父组件

1 个答案: