我在組件 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} /> )}}更新問題:這種方式非常適合我,我發現錯誤消息是由于我的代碼中的另一個問題引起的。所以伙計們,如果您想做同樣的事情,可以將其作為解決方案。
我如何從 React 中的另一個組件打開模態框
梵蒂岡之花
2022-12-29 15:13:38