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

Question

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

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

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

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

有人可以建议我是如何错误地实现这个的吗？

这是我得到的错误

TypeError: this.setState is not a function ./src/GridContent.tsx.GridContent.handleCloseModal [as closeDialog] C:/src/SignoffGui/src/GridContent.tsx:241 238 | } 239 | 240 | private handleCloseModal () {

241 | this.setState({ dialogOpen: false }); 242 | } 243 | 244 | private getActionButtonClass(expected:boolean, expression:boolean)

我的家长控制

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() 
  }

希望这会有所帮助；)