目前,我正在使用React制作模态系统 . 所以我在侧边栏中有一个按钮,我的模态是身体中的div .
我有两个组件,在我的应用程序的主要组件的渲染功能中呈现:
-
MyModal
-
MyModalOpenButton
这就是我需要的:当触发MyModalOpenButton的事件onClick时,我需要执行存储在MyModal组件中的函数 .
所以我基本上需要将myModal的ref存储在var中 .
我怎样才能做到这一点 ?
代码:
import * as ReactDOM from "react-dom";
import * as React from "react";
import { MyModal } from "./component/modal/my-modal";
import { SettingsButtons } from "./component/settings-buttons";
import { CustomComponent } from "./custom-component";
class App extends CustomComponent<{}, {}>{
constructor() {
super();
}
render() {
return (
<div>
<div className="sidebar">
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
<SettingsButtons />
</div>
<div className="mainContent">
</div>
<footer>TODO</footer>
<MyModal />
</div>
);
}
}
const app: App = ReactDOM.render(<App />, document.querySelector("#root")) as App;
和
import * as ReactDOM from "react-dom";
import * as React from "react";
import { CustomComponent } from "./../../custom-component";
import { ButtonComponent } from "./button";
export class MyModalOpenButton extends ButtonComponent<{}, {}> {
constructor() {
super();
}
render() {
return (
<li id="open-button" onClick={this.onClick}>
<i className="fa fa-plus" aria-hidden="true"></i>
</li>
);
}
onClick(event: React.MouseEvent<HTMLElement>) {
// Should open the modal
}
}
1 回答
你还没有分享你的代码,所以我不能给你一个特别适合你案例的答案,但总的来说: