React Native- 如何将状态从组件传递到它的 parent

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 函数的状态更改为我的 parent.

时，我的问题就来了

在我的 parent 中，我正在呼叫 <RoundTrip returnBool={this.state.roundTrip} /> 我知道我的函数无法访问我的 parent 的状态，但我不知道如何解决这个问题。

这个问题不是我的 RoundTrip 函数特有的，因为每当我尝试将文件分成组件时都会遇到这个问题。

提前致谢

Answer 1

一个选项是通过属性.

向 Roundtrip 组件传递 parent 组件的回调函数

Roundtrip 组件因此可以 return 值到 parent 组件。

<Roundtrip onChange={this.parentsMethodThatShallBeCalled} />

parent 的方法可能如下所示：

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

}

React Native- 如何将状态从组件传递到它的 parent

React Native- How to pass state from a component to it's parent

javascript

native

reactjs

react-native