javascript - react - Componente modal de IU semántica en Cerrar con Reaccionar

semantic ui modal

Question

Necesito una forma de definir el comportamiento en un modo semántico que se ejecuta cuando se cierra.

Lo que estoy haciendo ahora usa un ''portal'', pero creo que el evento "onClick" no funciona porque estos elementos html están fuera de la reacción.

Tuve:

componentDidMount() {
  console.log(''mounting modal'', this);
  this.node = React.findDOMNode(this);
  this.$modal = $(this.node);

  this.$icon = $("<i class=''close icon'' /></i>");

  this.$header = $("<div class=''header''></div>").html(this.props.header);
  this.$content = $("<div class=''content''></div>");

  this.$modal.append(this.$header);
  this.$modal.append(this.$icon);
  this.$modal.append(this.$content);

  this.renderDialogContent(this.props);
}

componentWillReceiveProps(newProps) {
  this.renderDialogContent(newProps);
}

renderDialogContent(props) {
  props = props || this.props;

  React.render(<div>{props.children}</div>, this.$content[0]);

  if (props.isOpen) {
    this.$modal
        .modal(''setting'', ''closable'', false)
        .modal(''show'');
  }
   else {
  this.$modal.modal(''hide modal'');
  }
}

¿Cómo puedo definir ese comportamiento?

Aquí hay un violín con un código similar .

Answer 1

Por alguna razón, no estoy seguro de por qué, no puede usar los controladores de eventos React regulares dentro de la vista modal.

Entonces, en el ícono de cerrar, registré un jquery en el controlador ClickClick.

$(''#'' + id).click(this.props.close);

y pasé muy cerca del componente padre.