Reactjs：對話框打開不適用於按鈕單擊

Question

我正在嘗試從另一個頁面/組件單擊按鈕打開和關閉對話框。 但它不適用於單擊按鈕。

任何我在處理模態方面遺漏和做錯的建議。

提前致謝。

//測試組件

class TestConnectDialog extends React.Component {
    render() {
      const {isOpen, onOk} = this.props;
  
      return (
        <Dialog
            isopen={this.props.isopen}
            onClose={this.props.handleClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
            >
            <DialogContent>
                <DialogContentText id="alert-dialog-description">
                 Test
                </DialogContentText>
            </DialogContent>
            <DialogActions className="dialog-action">
                <Button onClick={this.props.handleClose} className="primary-button">
                Ok
                </Button>
            </DialogActions>
        </Dialog>
      ); 

    }
};

export default TestConnectDialog;

// 主頁

import TestConnectDialog from './TestConnectDialog';
class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        isOpen: false 
        };
        this.handleTestConnectClick = this.handleTestConnectClick.bind(this);
        //this.handleCloseDialog = this.handleCloseDialog.bind(this);
    }

    handleTestConnectClick= () =>{
        this.setState({ isOpen: true });
    }
    render() {
      const {isOpen, onOk} = this.props;
  
      return (
        <div className="section">
            <Button  className="connect-test-button"
              onClick={this.handleTestConnectClick}>
              Test
            </Button>
            <TestConnectDialog isOpen={this.state.isOpen} />
        </div>
      ); 

    }
};

export default HomePage;

Answer 1

您的道具名稱拼寫錯誤，應該是this.props.isOpen也是一個快速小技巧，可以只使用一個函數來打開/關閉模態。

像這樣的事情會起作用：

handleTestConnectClick = () => {
    this.setState(prevState => ({
      ...prevState,
      isOpen: !prevState.isOpen
    }));
}

在這里，我們使用我們之前的狀態並使用! operator ! operator我們從真切換到假，反之亦然

更新 2.0：仔細查看Material UI 文檔后，我注意到您用於設置模式可見性的對話框道具是錯誤的。 它應該是open而不是isOpen 。

import TestConnectDialog from './TestConnectDialog';
class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    //this.handleTestConnectClick = this.handleTestConnectClick.bind(this);
    //this.handleCloseDialog = this.handleCloseDialog.bind(this);
    // when using arrow functions you don't need to bind the this keyword
  }

  handleTestConnectClick = () => {
    this.setState(prevState => ({
      ...prevState,
      isOpen: !prevState.isOpen
    }));
  }

  render() {
    return (
      <div className="section">
        <Button className="connect-test-button"
          // onClick={this.handleTestConnectClick}>
          // change the onClick to the one below
          onClick={ () => this.handleTestConnectClick() }
          Test
         </Button>
        <TestConnectDialog isOpen={this.state.isOpen} handleTestConnectClick={this.handleTestConnectClick}/>
      </div>
    );

  }
};

export default HomePage;

在TestConnectDialog組件中：

 class TestConnectDialog extends React.Component {
  render() {
    return (
      <Dialog
          open={this.props.isOpen}
          onClose={this.props.handleTestConnectClick}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
          >
          <DialogContent>
              <DialogContentText id="alert-dialog-description">
               Test
              </DialogContentText>
          </DialogContent>
          <DialogActions className="dialog-action">
              <Button onClick={this.props.handleTestConnectClick} className="primary-button">
              Ok
              </Button>
          </DialogActions>
      </Dialog>
    ); 

  }
};

export default TestConnectDialog;

Answer 2

您正在傳遞道具<TestConnectDialog isOpen={this.state.isOpen} />但嘗試使用isopen={this.props.isopen}讀取它。 將您的代碼更改為： isopen={this.props.isOpen}

Answer 3

按照給定的方式更新 TestComponent 組件

class TestConnectDialog extends React.Component {
    render() {
      const {isOpen, onOk} = this.props;
  
      return (
        <Dialog
            isopen={isOpen}
            onClose={this.props.handleClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
            >
            <DialogContent>
                <DialogContentText id="alert-dialog-description">
                 Test
                </DialogContentText>
            </DialogContent>
            <DialogActions className="dialog-action">
                <Button onClick={this.props.handleClose} className="primary-button">
                Ok
                </Button>
            </DialogActions>
        </Dialog>
      ); 

    }
};

export default TestConnectDialog;

Answer 4

在主頁組件中，為什么 isOpen 從 prop 解構並在 state 中初始化。 您必須使用一個，同時使用兩者會令人困惑，您正在狀態上使用它，但從道具中傳遞一個