Question

我想在＆＃34; model.js＆＃34;中调用模型。通过onClick来自另一个组件的按钮（list.js），只是想知道我是否错过了任何步骤，请看下面：

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;

我已经尝试了很多方法来更改List中的事件处理程序代码，但它仍然无法正常工作。

如果你们能帮助我指出问题所在，那将是非常值得欣赏的，这样我才能继续前进。

Answer 1

为什么不将状态open值更改为true或false

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

以上代码始终将值设置为false。也许你能做的是!this.state.open

Answer 2

您可以定义错过感叹号，因为现在，您在点击按钮时总是会分配false值 - 模式不会显示。

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

ReactJS - 我可以从不同的组件打开一个Modal

2 个答案: