在 ReactJS 中单击按钮打开对话框

Question

我正在使用 React MDL 库，并且我使用了预定义的组件，例如 FABButton

<FABButton>
  <Icon name="add"/>
</FABButton>  

它显示了如下图所示的按钮：

现在，我想要的是显示一个带有 + 图标的对话框...而不是这里发生的情况：

这发生在这段代码之后：

<FABButton>
  <AddingProject />
  <Icon name="add" />
</FABButton>

对话框的类如下：

class AddingProject extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleOpenDialog = this.handleOpenDialog.bind(this);
    this.handleCloseDialog = this.handleCloseDialog.bind(this);
  }
  handleOpenDialog() {
    this.setState({
      openDialog: true
    });
  }

  handleCloseDialog() {
    this.setState({
      openDialog: false
    });
  }
  render() {
    return (
      <div>
        <Button colored onClick={this.handleOpenDialog} raised ripple>
          Show Dialog
        </Button>
        <Dialog open={this.state.openDialog} onCancel={this.handleCloseDialog}>
          <DialogTitle>Allow data collection?</DialogTitle>
          <DialogContent>
            <p>
              Allowing us to collect data will let us get you the information
              you want faster.
            </p>
          </DialogContent>
          <DialogActions>
            <Button type="button">Agree</Button>
            <Button type="button" onClick={this.handleCloseDialog}>
              Disagree
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

export default AddingProject;

上面的代码带有所需的import语句

Answer 1

这对我有用......
第一步：我添加了模态组件，如下：

<FABButton>
  <Icon name="add" />
</FABButton>
<ProjectModal>

第二步：我为组件添加了这个道具：

visible

，如下所示：

<ProjectModal visible={this.state.showDialog} />

在这里，您需要使用

showDialog

将

false

添加到班级中的状态。

state = {
  showDialog: false
};

现在进行第 3 步。
第三步： 将这部分添加到您的代码中，点击时调用。

openModal = () => {
  this.setState({ showDialog: true });
};

另一边，您需要在按钮中实现

onClick

，如下所示：

<FABButton onClick={this.openModal.bind(this)}>
  <Icon name="add" />
</FABButton>

第四步：在模态/对话框类中，需要将可见存储在一个新的状态变量中，这里是

showDialogModal

constructor(props, context) {
super(props, context);
this.state = {
    showDialogModal: this.props.visible
  };
}

现在，您需要将更改后的状态从第一个类传递到模态/对话框类，React 为您提供了多个选项，我在第五步中使用了这个。 第五步：使用此React事件

componentWillReceiveProps

，如下所示。

componentWillReceiveProps(nextProps) {
if (this.props.showDialogModal != nextProps.visible) {
  this.setState({
    showDialogModal: nextProps.visible
   });
  }
}

这将反映

visible

属性从第一类到我们的新类的任何更改，即

showDialogModal

现在在渲染部分，您需要检查组件的文档，这里我从 React-Bootstrap 开始。 第六步： 在组件中使用

show

属性。

<Modal show={this.state.showDialogModal} onHide={this.closeModal}>

onHide

用于关闭对话框，这使得你也需要实现它。

closeModal = () => {
  this.setState({ showDialogModal: false });
};

最后，在关闭按钮中添加以下内容：

<Button onClick={this.closeModal.bind(this)}>Close</Button>

祝你好运。

Answer 2

为什么 React 使得通过单击按钮打开和关闭对话框变得如此复杂？