0

I'm working with React MDL library, and I used pre-defined components like FABButton

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

And it shows the button as in the image bellow:
enter image description here

Now, what I want is showing a dialog with the + icon... not as what happens here:

enter image description here

This happened after this code:

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

The class of dialog is as follows:

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;

The above code is with the required import statements

4

1 回答 1

3

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

<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>

第四步：在modal/dialog类中，需要将visible存储在一个新的state变量中，这里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>

祝你好运。

于 2018-09-19T17:08:28.317 回答