如何在ReactJS中顯示模態對話框？

Question

我是JavaScript和ReactJS的新手。

我有一個應用程序，用戶在其中輸入他或她的電子郵件地址。然後 我嘗試創建用戶記錄。如果出現問題，我想顯示帶有錯誤信息的 模式窗口。

handleSubmit(evt) { 
    evt.preventDefault() 
    var email = this.state.email 
    var userCreationResult = this.createUser(email) 
    if (!userCreationResult.success) { 
    // The modal window should be displayed here 
    return 
    } 
} 

react-bootstrap 有模態窗口的組件。當用戶創建錯誤發生時，我嘗試使用此代碼來顯示它

import React, { Component, Modal } from 'react'; 

class ModalMessageBox extends Component { 
    constructor() { 
    super() 
    } 
    render() { 
    return (
     <div> 
     <Modal> 
      <Modal.Header closeButton> 
      <Modal.Title>Modal heading</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
      <h4>An error occured</h4> 
      <p>Test error message.</p> 
      </Modal.Body> 
     </Modal> 
     </div> 
    ) 
    } 
} 

export default ModalMessageBox; 

：我創建了一個基於它的一類

handleSubmit(evt) { 
    evt.preventDefault() 
    var email = this.state.email 
    var userCreationResult = this.createUser(email) 
    if (!userCreationResult.success) { 
    var dialog = new ModalMessageBox(); 
    ReactDOM.render(dialog, document.getElementById('root')); 

這不工作 - 我得到的錯誤ReactDOM.render(): Invalid component element. 。

什麼是顯示在反應的模式對話框的正確方法？

更新1（2017年7月27日15時27分MSK）：

類，其中包含提交處理程序。

import React, { Component } from 'react'; 
import { 
    FormGroup, 
    ControlLabel, 
    FormControl, 
    HelpBlock, 
    Button, 
    Modal, 
    Popover, 
    Tooltip, 
    OverlayTrigger 
} from 'react-bootstrap'; 
import style from './style'; 
import FallibleOperationResult from './FallibleOperationResult'; 
import ModalMessageBox from './ModalMessageBox'; 
import ReactDOM from 'react-dom'; 

class SignUpForm extends Component { 
    constructor(props) { 
    super(props) 
    this.state = {email: ''}; 
    this.handleEmailChange = this.handleEmailChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleEmailChange(evt) { 
    this.setState({ email: evt.target.value }); 
    } 
    handleSubmit(evt) { 
    evt.preventDefault() 
    var email = this.state.email 
    var userCreationResult = this.createUser(email) 
    if (!userCreationResult.success) { 
     displayUserCreationError(userCreationResult) 
     console.log("Error detected") 
     return 
    } 

    console.log("Submit button pressed, e-mail: " + this.state.email) 
    } 
    displayUserCreationError(userCreationResult) { 
    // Display of the moal dialog should be implemented here 
    // var dialog = new ModalMessageBox(); 
    // ReactDOM.render(dialog, document.getElementById('root')); 
    console.log("User cannot be created ('" + userCreationResult + "'"); 

    return; 
    } 
    createUser(email) { 
    return new FallibleOperationResult(
     false, 
     'User ' + email + ' cannot be created', 
     undefined 
    ); 
    } 
    render() { 
    return (
     <div style={style.signUpForm}> 
     <form onSubmit={ this.handleSubmit }> 
      <FormGroup 
      controlId="formBasicText" 
      > 
      <FormGroup> 
      <ControlLabel>Email address</ControlLabel> 
      <FormControl 
       type="email" 
       placeholder="Enter email" 
       onChange={ this.handleEmailChange } 
      /> 
      </FormGroup> 
      <Button type="submit">Sign Up</Button> 
      <p>Your password will be sent to your e-mail address.</p> 
      </FormGroup> 
     </form> 
     </div> 
    ) 
    } 
} 

export default SignUpForm; 

Answer 1

整個應用程序應該只有一個ReactDOM.render。您必須根據狀態切換顯示內容和不顯示內容。

既然你沒有提供父類，我假設和給我自己的指導。

handleSubmit(evt) { 
    evt.preventDefault() 
    var email = this.state.email 
    var userCreationResult = this.createUser(email) 
    if (!userCreationResult.success) { 
    // The modal window should be displayed here 
    // you must set the state here 
    this.setState({ 
     userFailed: true 
    }); 
    return 
    } 
} 

，並在渲染：

render() { 
    return (
    <div> 
     // your usual code here 
     // render the modal based on state here 
     { this.state.userFailed ? < ModalMessageBox /> : null } 
    </div> 
) 
} 

更新時間：

import React, { Component } from 'react'; 
 
    import { 
 
     FormGroup, 
 
     ControlLabel, 
 
     FormControl, 
 
     HelpBlock, 
 
     Button, 
 
     Modal, 
 
     Popover, 
 
     Tooltip, 
 
     OverlayTrigger 
 
    } from 'react-bootstrap'; 
 
    import style from './style'; 
 
    import FallibleOperationResult from './FallibleOperationResult'; 
 
    import ModalMessageBox from './ModalMessageBox'; 
 
    import ReactDOM from 'react-dom'; 
 

 
    class SignUpForm extends Component { 
 
     constructor(props) { 
 
     super(props) 
 
     this.state = { 
 
      email: '', 
 
      userCreationFailed: false 
 
     }; 
 
     this.handleEmailChange = this.handleEmailChange.bind(this); 
 
     this.handleSubmit = this.handleSubmit.bind(this); 
 
     this.displayUserCreationError = this.displayUserCreationError.bind(this); 
 
     } 
 
     handleEmailChange(evt) { 
 
     this.setState({ email: evt.target.value }); 
 
     } 
 
     handleSubmit(evt) { 
 
     evt.preventDefault() 
 
     var email = this.state.email 
 
     var userCreationResult = this.createUser(email) 
 
     if (!userCreationResult.success) { 
 
      displayUserCreationError(userCreationResult) 
 
      console.log("Error detected") 
 
      return 
 
     } 
 
     
 
     console.log("Submit button pressed, e-mail: " + this.state.email) 
 
     } 
 
     displayUserCreationError(userCreationResult) { 
 
     this.setState({ 
 
      userCreationFailed: true 
 
     }); 
 
     console.log("User cannot be created ('" + userCreationResult + "'"); 
 
      
 
     return; 
 
     } 
 
     createUser(email) { 
 
     return new FallibleOperationResult(
 
      false, 
 
      'User ' + email + ' cannot be created', 
 
      undefined 
 
     ); 
 
     } 
 
     render() { 
 
     return (
 
      <div style={style.signUpForm}> 
 
      <form onSubmit={ this.handleSubmit }> 
 
       <FormGroup 
 
       controlId="formBasicText" 
 
       > 
 
       <FormGroup> 
 
       <ControlLabel>Email address</ControlLabel> 
 
       <FormControl 
 
        type="email" 
 
        placeholder="Enter email" 
 
        onChange={ this.handleEmailChange } 
 
       /> 
 
       </FormGroup> 
 
       <Button type="submit">Sign Up</Button> 
 
       <p>Your password will be sent to your e-mail address.</p> 
 
       </FormGroup> 
 
      </form> 
 
      {this.state.userCreationFailed ? <ModalMessageBox /> : undefined} 
 
      </div> 
 
     ) 
 
     } 
 
    } 
 

 
    export default SignUpForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>