Нажав кнопку, чтобы открыть диалог в 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>

Удачи.