给出的是我创建为js文件的文件.....在我评论过的文件中单击按钮 output.js中的按钮标记工作正常,如果我在其他页面中更改按钮,则会造成混乱
output.js
import React, {Component} from 'react'
import { Modal, Button } from 'react-bootstrap'
class Threed extends Component {
constructor(){
super()
this.state ={show:false}
}
threedModal(){
this.setState({show:!this.state.show})
}
render() {
return (
<div>
{/*<Button onClick= {() => {this.threedModal()}}>
rajesh
</Button>*/}
<Modal show={this.state.show} onHide={() => this.handleModal()}>
<Modal.Header closeButton>MY popup</Modal.Header>
<Modal.Body>Rajesh modal done</Modal.Body>
<Modal.Footer><Button onClick= {() => {this.handleModal()}}> close </Button></Modal.Footer>
</Modal>
</div>
)
}
}
export default Threed
home.js
import React, {Component} from 'react'
import { Modal, Button } from 'react-bootstrap'
import threed from './output.js'
class Threed extends Component {
constructor(){
super()
this.state ={show:false}
}
threedModal(){
this.setState({show:!this.state.show})
}
render() {
return (
<div>
<Button onClick= {() => {this.threedModal()}}>
rajesh
</Button>
</div>
)
}
}
export default Threed
我想在单击home.js按钮的同时显示并显示模式弹出窗口…… 在这里,我的困惑是如何通过单击Home.js的按钮来实现这一功能
答案 0 :(得分:1)
请将该值转发给模态。
Home.js
import Threed from './output.js'
class Home extends Component {
...
< Threed show={this.state.show} />
Threed.js
<Modal show={this.props.show} onHide={() => this.handleModal()}>