javascript - 无法使用对 setState 的反应挂钩从子组件打开反应引导模式

问题描述

我正在尝试从子组件内的按钮触发我在父组件中的 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

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

标签： javascriptreactjsreact-hooksreact-bootstrap

javascript - 无法使用对 setState 的反应挂钩从子组件打开反应引导模式

问题描述

解决方案

推荐阅读