无法使用React钩子到setState从子组件打开react-bootstrap模态

问题描述

我正在尝试通过子组件内部的按钮触发父组件中的react-bootstrap模式。为此，我将handleShow函数作为道具传递给子组件，但这似乎不起作用。单击按钮不会打开模式，并且浏览器控制台上没有错误。

父项：

OnboardPage.jsx

import React from 'react'
import { Row,Form } from 'react-bootstrap'

import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
import { OnboardForm } from './form'
import { FAQs } from './faq'
import { LeftCol,RightCol,FormContainer } from './styles'
import './styles.css'
import { Modal,Button } from 'react-bootstrap'

const OnboardPage = props => {
    const [show,setShow] = React.useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true); 

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <OnboardForm />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={handleClose} className="editModal">
                <FormContainer>
                    <Modal.Header className="editModalHeader">
                      <Modal.Title>Edit Personal Details</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                   
                        <Form>
                          <Form.Group controlId="formBasicName">
                            <Form.Control type="text" placeholder="Name" className="formInput"/>
                          </Form.Group>

                          <Form.Group controlId="formBasicEmail">
                            <Form.Control type="email" placeholder="Email ID" className="formInput"/>
                          </Form.Group>

                          <Form.Group controlId="formBasicPhoneNumber">
                            <Form.Control type="text" placeholder="Phone Number" className="formInput"/>
                          </Form.Group>
                          <Form.Group controlId="formBasicName">
                            <Form.Control type="text" placeholder="Country you will work in" className="formInput"/>
                          </Form.Group>
                          <Button variant="primary" type="submit" className="submitBtn">
                            Save details
                          </Button>
                        </Form>
                    
                </Modal.Body>
                </FormContainer>
            </Modal>
        </Row>
    )
}

export default OnboardPage

子组件：

PersonalDetails.jsx

import React from 'react'

import { colors } from '../../../../res'
import { TitleText,CommonText,SubheadingText } from '../../../commons/freelancer/texts'
import { Container,TitleRow,DetailsRow,DetailsItem,EditBtn } from './personalDetailsstyles'
import { Modal,Button } from 'react-bootstrap'
// import EditDetailsModal from './EditDetailsModal'

const PersonalDetails = ({parentShowFn}) => {

    return (

        <Container>
        <TitleRow>
            <TitleText>Personal Details</TitleText>
            <EditBtn onClick={() => parentShowFn()}>Edit</EditBtn>
        </TitleRow>
    </Container>
    )

}
    
export default PersonalDetails

似乎无法追踪为什么它不起作用。

解决方法

对不起。在跳到这里提出问题之前，我应该做更多的研究。原来由其他人开发的<EditBtn>的样式化组件缺少{... props}。因此，它没有将onClick道具传递给点击侦听器。感谢您的答复。