ReactJS：点击按钮无法打开Dialog问题排查求助

嘿，我帮你找出了几个导致Dialog点击后没反应的问题，咱们一步步来修复：

问题1：属性大小写不匹配 + 组件属性名错误 #

React的props和组件属性是严格大小写敏感的，而且如果你用的是Material-UI的Dialog组件，控制显示/隐藏的正确属性是open，不是isopen或者isOpen。你之前在TestConnectDialog里犯了两个小错误：

• 把props里的isOpen写成了全小写的isopen，导致Dialog拿不到正确的状态值
• 给Dialog传递的属性名不符合组件要求

问题2：没有传递关闭Dialog的回调函数 #

你的TestConnectDialog里，Dialog的onClose和Ok按钮的onClick都调用了this.props.handleClose，但你在HomePage里根本没给子组件传递这个方法，所以点击后自然没有任何反应。

问题3：多余的props解构（可选但建议修复） #

HomePage的render函数里你写了const {isOpen, onOk} = this.props;，但你实际需要的是state里的isOpen，这行代码会造成混淆，建议去掉。

修复后的完整代码 #

TestConnectDialog.js #

class TestConnectDialog extends React.Component {
  render() {
    // 解构props让代码更清晰
    const { isOpen, handleClose } = this.props;
    return (
      <Dialog 
        open={isOpen} // 使用Material-UI Dialog的正确属性open
        onClose={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={handleClose} className="primary-button">
            Ok
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
};
export default TestConnectDialog;

HomePage.js #

import TestConnectDialog from './TestConnectDialog';
class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
    // 因为用了箭头函数，不需要手动bind this
  }

  handleTestConnectClick = () => {
    this.setState({ isOpen: true });
  }

  // 添加关闭Dialog的回调方法
  handleCloseDialog = () => {
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <div className="section">
        <Button className="connect-test-button" onClick={this.handleTestConnectClick}>
          Test
        </Button>
        {/* 给子组件传递isOpen状态和关闭回调 */}
        <TestConnectDialog 
          isOpen={this.state.isOpen} 
          handleClose={this.handleCloseDialog} 
        />
      </div>
    );
  }
};
export default HomePage;

这样修改之后，点击Test按钮就能正常打开Dialog，点击Ok按钮或者Dialog的关闭按钮都能关闭它了。

内容的提问来源于stack exchange，提问作者Tammy