這里講解一下react組件中常見彈框的顯示隱藏~ 在這里主要涉及一個知識點，就是父子組件的通訊。

如圖所示：

1- 點擊編輯按鈕的時候彈出對應的彈框。

2- 在彈框中點擊確定或者取消的時候彈框消失。

---

代碼如下所示：

父組件：

/*設置默認值*/constructor() {super();this.state = {visible: false,itemData: {}}}/*設置顯示隱藏狀態和要傳遞的參數*/showModal = (itemData) => {this.setState({visible: true,itemData}); }/*獲取子組件傳遞過來的值*/changeStatus = (status) =>{this.setState({visible:status})} /*表格的columns*/const columns= [ {title: '銷售總監',dataIndex: 'salemanage',key: 'salemanage',width: 100,},{title: '銷售總監UM碼',dataIndex: 'salemanageUM',key: 'salemanageUM',width: 100,},{title: '操作',width: 100,key: 'action',className: 'table-action',render: (text, item) => {return (<div><div style={{ 'color': 'blue' }} onClick={this.showModal.bind(this,item)}>編輯</div></div>);},}]render (){/*這里是彈框組件，通過visible，entray，status將父組件的值傳遞給子組件*/<CollectionCreateFormvisible={visible}entray={itemData}status={this.changeStatus}/>} }

子組件：

onOk = () => {let status = false;this.props.status(status);}onCancel = () =>{let status = false;this.props.status(status);}render() {const { visible, entray} = this.props;return (<Modalvisible={visible}title="呵呵噠"onCancel={this.onCancel}onOk={this.onOk}></Modal>

總結

以上是生活随笔為你收集整理的react中弹框的显示隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。