無法使用反應鈎子到 setState 從子組件打開反應引導模式

Question

我正在嘗試從子組件內的按鈕觸發位於父組件中的 react-bootstrap 模態。 為了實現這一點，我將handleShow函數作為道具傳遞給子組件，但這似乎不起作用。 單擊按鈕時模態不會打開，並且瀏覽器控制台上沒有錯誤。

父組件：

板載頁面.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

似乎無法追蹤為什么這不起作用。

Answer 1

對不起大家。 在跳到這里提問之前，我應該進行更多研究。 原來由其他人開發的<EditBtn>樣式組件缺少 {...props}。 因此，它沒有將 onClick 道具傳遞給點擊偵聽器。 感謝您的回復。