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

【问题标题】：Not able to open react-bootstrap modal from child component using react hooks to setState无法使用对 setState 的反应挂钩从子组件打开反应引导模式
【发布时间】：2020-12-31 07:13:27
【问题描述】：

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

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

【问题讨论】：

看不到原因。你能创建一个重现问题的代码框吗？
我也看不出为什么这不起作用 - 但来吧，这是调试 101。使用 React devtools 或调试器 - 如果你不能，甚至只是 console.log 语句出于某种原因使用它 - 更准确地找出问题是什么。 Modal 组件是否将其 show 属性设置为 true？父母中的handleShow 是否被调用？如果不是，那是什么？走这条路不一定能让你解决问题，但至少会缩小问题的范围——如果你仍然需要帮助，你可以问一个更有针对性的问题。
我已经在 stackblitz 中尝试过一切对我来说似乎也很好 stackblitz.com/edit/react-nu7nlr

标签： javascript reactjs react-hooks react-bootstrap

【解决方案1】：

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

【讨论】：