Question

当用户单击子组件中的关闭按钮时，我想关闭子组件中的子组件。通过将状态从孩子传回父母来尝试，但它不起作用。我在这里做错了什么？

父

class Home extends Component {
  constructor() {
    this.state = {
      visible: true
    }
  {

  closeComponent = () => {
      this.setState({
          visible: false
      });
  }

  render() {
    return (
      <Container>
       {
         this.state.visible &&
         <Child closeComponent={this.closeComponent} />
       }
      </Container>
    )
  }
}

子

import React from 'react';
import { Text, Image } from 'react-native';
import { View, Button } from 'native-base';

import styles from './ChildStyles.js';

export const Child = ({ closeComponent }) => {
  return (
    <View style={styles.Container}>
      <Button style={styles.Btn} onClick={() => closeComponent}>
        <Text style={styles.BtnText}>Close</Text>
      </Button>
    </View>
  );
};

export default Child;

Answer 1

子级中arrow function的语法不正确。基于原生的Button也没有onClick但onPress处理程序。它应该是

  <Button style={styles.Btn} onPress={() => closeComponent()}>
    <Text style={styles.BtnText}>Close</Text>
  </Button>

从子组件本身关闭子组件

1 个答案: