Javascript React Native-如何将状态从组件传递给它'；父母

我正在构建一个React本机应用程序，遇到了这个问题，我不知道如何解决

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

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>

功能往返（道具）{
console.log（'往返值'+props.returnBool）
var往返=props.returnBool；
if（往返）{
console.log（'返回为true'）
返回；
}
console.log（'返回为false'）
返回；
}
函数RoundTripFalse（道具）{
返回空值
}
函数RoundTripTrue（道具）{
返回(
{this.setState（{returnDate:returnDate}}}
/>
{this.setState（{returnTime:returnTime}）；}
自定义样式={{
日期输入：{
边缘左：2，
背景颜色：“白色”，
边框宽度：1，
边界半径：5，
边框颜色：“白色”，
弹性：1，
flexDirection:'行'，
},
日期文本：{
flexDirection:'行'，
弹性：1，
背景色：“透明”，
颜色：'黑色'，
},
dateTouchBody：{
flexDirection:'行'，
身高：40，
对齐项目：“居中”，
为内容辩护：“中心”，
弹性：1，
paddingTop:5，
},
占位符文本：{
颜色：'#c9c9c9'，
对齐自我：“中心”，
justifyContent:“flex start”，
弹性：1，
flexDirection:'行'，
尺码：18，
}
}}
/>

这工作正常，但当我试图将往返函数的状态更改为我的父函数时，我的问题就出现了

在我的父母那里，我正在呼叫

我知道我的职能部门无法访问我父母的状态，但我不知道如何解决这个问题

这个问题并不是我的往返函数所特有的，因为每当我尝试将文件分离为组件时，我都会遇到这个问题

---

提前感谢

一个选项是通过属性向往返组件传递父组件的回调函数

往返组件可以向父组件返回值

<Roundtrip onChange={this.parentsMethodThatShallBeCalled} />

---

}

一个选项是通过属性向往返组件传递父组件的回调函数

往返组件可以向父组件返回值

<Roundtrip onChange={this.parentsMethodThatShallBeCalled} />

---

}

所以问题是当您将这些函数放入不同的文件中时？为什么不将其导出，然后导入到一个新文件中？同样，为了返回到父级，只需传递一个函数

，其中handleChange是一个接受一些值并设置状态的函数。此外，这里的示例称为

Fun功能组件

与

反应类

相反。功能组件没有状态，不能在其中调用setstate。这应该引发异常。如果要使用状态，则需要使用状态使这些反应类具有状态。因此，问题是当您将这些函数放入不同的文件中时？为什么不直接

导出

然后将其导入新文件？同样，为了返回父级，只需传递一个函数

，其中handleChange是一个接受某些值并设置状态的函数。此外，这里的示例称为

功能组件

，而不是

反应类

。功能组件没有状态，并且不能在其中调用setstate。这应该引发异常。如果要使用状态，则需要使这些react类使用状态