亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我如何從 React 中的另一個組件打開模態框

我如何從 React 中的另一個組件打開模態框

梵蒂岡之花 2022-12-29 15:13:38
我在組件 A 中有一個模態,我想通過單擊組件 B 中的按鈕來顯示該模態。我使用了 ref 關鍵字,但它不適用于此控制臺錯誤“TypeError:無法解構‘object null’的屬性‘toggleModal’,因為它為 null?!盇.js:export class LoginForm extends Component{constructor(props){    super(props);    this.state ={        isModalOpen: false    }    this.toggleModal = this.toggleModal.bind(this);};toggleModal(){    this.setState({    isModalOpen: !this.state.isModalOpen    })};render(){    return(        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>            <ModalHeader toggle={this.toggleModal}>Login</ModalHeader>            <ModalBody>                ...            </ModalBody>        </Modal>    )}B.js:import { LoginForm } from './FormsComponent';        class Header extends Component{        constructor(props){        super(props);        };          loginModalRef = ({toggleModal}) =>{        this.showModal = toggleModal;      };      onLoginClick = () =>{        this.showModal();      }      render(){        return(              <Nav className="ml-auto" navbar onClick={this.onLoginClick}>                  <NavItem>                     <Button outline color="primary">                        <span className="fa fa-sign-in fa-lg"> Login</span>                     </Button>                  </NavItem>               </Nav>                 <LoginForm ref={this.loginModalRef} />            )}}更新問題:這種方式非常適合我,我發現錯誤消息是由于我的代碼中的另一個問題引起的。所以伙計們,如果您想做同樣的事情,可以將其作為解決方案。
查看完整描述

3 回答

?
SMILET

TA貢獻1796條經驗 獲得超4個贊

為了處理來自孩子的模態狀態,我使用了這個解決方案https://stackoverflow.com/a/71464748/1770571并且它適用于我



查看完整回答
反對 回復 2022-12-29
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

使用狀態管理是一個很好的做法,否則 refs 可以幫助你,你可以訪問組件 B 的組件 A 功能。



查看完整回答
反對 回復 2022-12-29
?
哈士奇WWW

TA貢獻1799條經驗 獲得超6個贊

您可以將狀態“向上”移動到同時包含 LoginForm 和 Header 的父組件。并將回調和狀態傳遞給兩個組件


    class Parent {

    state = { modalOpen: false }

    openModal = ()=> setState({modalOpen: true})

render(){

return <div>

    <Header onClick={openModal} />

    <LoginForm modalOpen={modalOpen} />

</div>

}

}


查看完整回答
反對 回復 2022-12-29
  • 3 回答
  • 0 關注
  • 192 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號