如何在 React 中正确实现对话框组件

Question

我正在使用 react-modal npm 包并将其包装在我自己的组件中，这样我就可以在整个应用程序中重用一些行为和样式。

我想要的是能够将所有输入模式对话框行为封装在一个单独的组件中，并将其作为 React 标签插入到我想使用此对话框行为的任何页面中。

我的问题是我不确定控制对话框打开状态的正确方法。目前，我将其作为父控件状态的布尔属性进行维护，并将其作为道具传递给 Dialog 组件，以及 close() 和 ok() 的回调。

问题是当用户单击确定或关闭按钮时执行回调时，它会尝试调用 this.setState({ dialogOpen: true }) （或 false）并且“this”似乎不再指代父控件，我猜是因为它是从对话框中执行的，所以“this”现在指的是输入对话框。

有人可以建议我如何错误地实现这一点吗？

这是我得到的错误

TypeError: this.setState 不是函数 ./src/GridContent.tsx.GridContent.handleCloseModal [as closeDialog] C:/src/SignoffGui/src/GridContent.tsx:241 238 | 239 | 240 | 私人句柄CloseModal () {

241 | this.setState({ dialogOpen: false }); 242 | 243 | 244 |私人getActionButtonClass（预期：布尔， 表达式：布尔值）

我的父控件

interface IGridContentState { 
  dialogOpen: boolean
}

class GridContent extends React.Component<{},IGridContentState> {

  constructor(props: any) {
    super(props);    

    this.state = { dialogOpen: false};
    this.handleOpenModal = this.handleOpenModal.bind(this);
  }

  public render() {
    return (          
      <div className="Flex-Subcontainer" style={{margin:10}}>   
        <InputDialog 
          title="Please enter a reason for rejecting"
          dialogOpen={this.state.dialogOpen}
          submitText={this.handleRejectText}
          closeDialog={this.handleCloseModal}
        />     
     <button onClick={(e) => this.doReject()}>Reject</button>             
     </div>
  }

  private doReject()
  {
    if (this.gridApi.getSelectedNodes().length > 0)
    {
      this.handleOpenModal();
    }
  }

  private handleRejectText(enteredText: string)
  {
    this.props.signoffReject(this.getSelectedEntries(), enteredText);
    this.gridApi.refreshCells();
  }

  private handleOpenModal () {
    this.setState({ dialogOpen: true });
  }

  private handleCloseModal () {
    this.setState({ dialogOpen: false });
  }    
}

还有我的对话框控件

import * as React from 'react';
import * as ReactModal from 'react-modal';
import '../App.css';

interface IInputDialogProps 
{
  title: string,
  dialogOpen: boolean,
  submitText : (enteredText:string) => void,
  closeDialog : () => void
}

interface IInputDialogState 
{
  enteredText: string
}

class InputDialog extends React.Component<IInputDialogProps, IInputDialogState> {
  private input:React.RefObject<HTMLInputElement> = React.createRef();

  constructor(props: IInputDialogProps) {
    super(props);    

    this.state = {  enteredText: ""};

    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  public render() {
    return (
      <ReactModal 
        isOpen={this.props.dialogOpen}
        // contentLabel="Example Modal"
        // className="Modal"
        // tslint:disable
        onAfterOpen={() => this.input.current.focus()}
        overlayClassName="Overlay"
        shouldCloseOnEsc={true}
        shouldReturnFocusAfterClose={true}
        role="dialog"
        onRequestClose={this.handleCloseModal}
        shouldCloseOnOverlayClick={false}
        ariaHideApp={false}
        // tslint:disable
        parentSelector={() => document.body}> 
          <div className="Modal-Container"> 
              <div style={{flex:0.4}}>
                <div className="Panel-header-left">
                  {this.props.title}
                </div>
              </div>
              <div style={{flex:0.6}}>
                <form onSubmit={(e) => this.processOkClicked()}>
                  <input ref={this.input} type="textbox" name="ModalInput" value={this.state.enteredText} onChange={ (e) => this.handleTextChanged(e)} />
                </form>
              </div>
              <div>
                <div className="Panel-header-right">
                  <button className="Action-Button" onClick={(e) => this.handleCloseModal()}>Cancel</button>
                  <button className="Action-Button" onClick={(e) => this.processOkClicked()}>OK</button>
                </div>
              </div>          
          </div>
      </ReactModal>
    );
  }

  private handleCloseModal () {
    this.props.closeDialog();
  }  

  private handleTextChanged(e:React.ChangeEvent<HTMLInputElement>) {
    this.setState({ enteredText: e.target.value});
  }

  private processOkClicked () {
    if (this.state.enteredText === "") return;
    this.props.closeDialog();
    this.props.submitText(this.state.enteredText);
  }
}

export default InputDialog;

Answer 1

在您的父组件中，您执行了bind handleOpenModal，但您在传递之前没有bind handleCloseModal 函数。 试试这个：

public render() {
    return (          
      <div className="Flex-Subcontainer" style={{margin:10}}>   
        <InputDialog 
          title="Please enter a reason for rejecting"
          dialogOpen={this.state.dialogOpen}
          submitText={this.handleRejectText}
          closeDialog={this.handleCloseModal.bind(this)} //<---- here, add a bind() 
        />     
     <button onClick={(e) => this.doReject()}>Reject</button>             
     </div>
  }

或者这个：

constructor(props: any) {
    super(props);    

    this.state = { dialogOpen: false};
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this); //<---- here, add a bind() 
  }

希望这会有所帮助；）