Question

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

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

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

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

有人可以建议我如何错误地实施此操作吗？

这是我得到的错误

TypeError：this.setState不是函数   ./src/GridContent.tsx.GridContent.handleCloseModal [作为closeDialog]   C：/src/SignoffGui/src/GridContent.tsx：241238 | } 239 | 240 |   私人handleCloseModal（）{


241 | this.setState（{dialogOpen：false}）; 242 | } 243 | 244 |私人getActionButtonClass（expected：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() 
  }

希望这会有所帮助;）

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

1 个答案: