react-native - 如何通过具有状态的视图传递函数？

Question

需要你的帮助。

当我尝试通过不同的视图传递一个函数（其目的是关闭一个模式）时，我的代码遇到了问题。

父视图包含一个在单击时打开模式的按钮，子视图包含模式内容，包括应该关闭它的可触摸内容。关闭模式功能在父视图中。

这是代码：

//Button Function in the parent view (turn the state to false to hide modal)

closeEventParticipeModal() {
this.setState({showModalParticipeEvent: false});
}


//The function that contains the modal and shows it if the visible is true thanks to state.

renderParticipeModal() {
for (let i = 0; i < this.state.userProfile['events_participes'].length; i++) {
  if (this.state.modalEventParticipeSelected == i) {
    const event = this.state.userProfile['events_participes'][i];

    return(
      <EventParticipeModal 
        visible={this.state.showModalParticipeEvent} 
        event={event} 
        closebuttonFunction={this.closeEventParticipeModal()}
        />
      );
  }
}


    //Here is the code that contains my modal view including a touchable that should close the modal when clicking on it.

    export default class EventParticipeModal extends React.Component{

    displayEventParticipeModal() {
return(
  <Modal
    animationType='slide'
    transparent={true}
    visible={this.props.visible}>
        <TouchableOpacity style={{height: '15%'}}
                          onPress={() => {this.props.closebuttonFunction}}/>
        <View style={{flex: 3, marginHorizontal: '3%', backgroundColor: 'white', borderRadius: 20, borderWidth: 0.2}}/>
          
  </Modal>
);
}

render(){
return(
  <View style={styles.touchableContainer}>
    {this.displayEventParticipeModal()}
  </View>
 );

  
  //My constructor is as followed
  constructor(props) {
  super(props);

  this.state = {
    backgroundColor: 'blue',
  showModalParticipeEvent:false,
  event_created:true,
  
  events: [],
  isLoading: true,
  modalEventParticipeSelected:-1,
  };

this.closeEventParticipeModal = this.closeEventParticipeModal.bind(this);

}

当我单击可触摸时，什么也没有发生。我尝试了很多东西，但遇到了各种错误，例如“超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环""

先感谢您 ：）

标签： react-nativestate