如何在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>