打开一个模式一个按钮，点击

Question

下面的代码使用了模态反应成分：

export class AddWorkLogEditor extends React.Component { 
    constructor(props) { 
     super(props); 

     this.addWorkLog = this.addWorkLog.bind(this);  
     this.onOpenModal = this.onOpenModal.bind(this); 
     this.onCloseModal = this.onCloseModal.bind(this); 
     this.state = { 
      open:true 

      }; 
     } 

    onOpenModal() { 
    this.setState({open: this.props.openModal}); 
    } 

    onCloseModal() { 
    this.setState({open:false}); 
    } 

    addWorkLog() { 

    } 



render() { 
     const bstyle = { 
     backgroundColor: 'green', 
     textAlign:"left", 
     paddingLeft: '0px', 
     color: 'white' 
    }; 
const {open} = this.state; 
     return (
      <div> 
       <Modal open={open} onClose={this.onCloseModal} little> 
       <h3>hi gi</h3> 

       <Button bsStyle="success" bsSize="small" onClick ={(ev) => {console.log(ev)} }> Save </Button> 
       </Modal> 
      </div> 
     ); 
    } 
} 

我试图用叫它：

addWorkLog() 
{ 
     return <AddWorkLogEditor/>; 
} 

和

createAddWorkLogButton() { 

    return (
     <button style={ { color: '#007a86'} } onClick={this.addWorkLog} >Add Work Log</button> 
    ); 
} 

我的意思是，我点击这个按钮后没有任何东西出现。是否有另一种方式来调用该模式？我从导入模式：

进口模态，从“反应响应模态”

Answer 1

您正在尝试使只有一次按钮被点击的模式，而这是相当自然的非反应环境中，以不同的方式作出反应。在最简单的解决方案中，应始终呈现Modal，并且当用户单击按钮时，将模式open属性更改为true。

{ /* all the markup of your page */ } 
<button onClick={() => this.setState({showModal: true})}>Add Work Log</button> 
{ /* anything else */ } 

{ /* modal is here but it is hidden */ } 
<Modal open={this.state.showModal}>...</Modal> 

或者，你可以跳过模式呈现在所有直至showModal为真。

this.state.showModal && <Modal open>...</Modal>