ReactJS - 我可以打开从不同的组件模态

问题描述：

我想通过onClick从另一个组件（list.js）按钮调用模型在“model.js”，只是想知道如果我错过了任何一步请看如下：ReactJS - 我可以打开从不同的组件模态

model.js

import React from 'react'; 

class Model extends React.Component{ 

render(){ 
    return(
    <div> 
    //code inside the Model etc... 
    <Button onClick={this.submit.bind(this)}>Submit</Button> 
    </div> 
) 
} 
} 

export default Model;

list.js

import Model from './model'; 
class List extends React.Component{ 
render(){ 

    constructor() { 
    super(); 

    this.toggleModal = this.toggleModal.bind(this); 
    this.state = { 
    open: false 
    } 
    } 

    toggleModal() { 
    this.setState({ 
    open: this.state.open 
    }); 
    } 

return(
<div> 
    <Button onClick={this.toggleModal}>Add</Button> 
</div> 
<div> 
    <Model open={this.state.open} toggleModal={this.toggleModal}/> 
</div> 
) 
} 
} 

export default List;

我已经尝试了许多方法来改变在列表中的事件处理程序代码，但它仍然不工作。

如果你们可以帮我一把，指出问题出在哪里，那么我可以向前迈进。

答

你为什么不改变状态open值为true或false

this.setState({ 
    open: this.state.open 
});

上面的代码将永远设置值为false。也许你可以做的是!this.state.open

感谢兄弟问题解决：} –

很高兴帮助:) –

答

你一定会错过感叹号，因为就目前而言，当点击按钮时你总是会指定false值 - 模态不会显示出来。

this.setState({ 
    open: !this.state.open 
});

ReactJS - 我可以打开从不同的组件模态

相关推荐