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

Question

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

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

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

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

这发生在这段代码之后：

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

对话框class如下：

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

这对我有用....
第一步：我添加了modal的组件如下：

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

第二步： 我添加了这个道具：visible 组件如下：

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

在这里您需要将 showDialog 添加到 class 中的状态 false。

state = {
  showDialog: false
};

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

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

另一方面，需要在按钮中实现onClick，如下：

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

第四步：在modal/dialogclass中，需要将visible存放在一个新的state变量中，也就是这里showDialogModal

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

现在，你需要将改变的状态从第一个class传递到modal/dialog class，React 给你的选项不止一个，我用了这个在第五步。 第五步： 使用此 React 事件 componentWillReceiveProps 如下。

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

这将反映 visible 属性从第一个 class 到我们这里的新 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>

祝你好运。

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

Clicking a button to open dialog in ReactJS

frontend

dialog

reactjs

react-modal