Estoy tratando de integrar zurb revelan la forma en reaccionar componente. Hasta el momento siguiente código muestra correctamente el formulario modal:

ModalForm = React.createClass({
  handleSubmit: function(attrs) {
    this.props.onSubmit(attrs);
    return false;
  },

  render: function(){
    return(
      <div>
        <a href="#" data-reveal-id="formModal" className="button">Add new</a>
        <div id="formModal" className="reveal-modal" data-reveal>
          <h4>Add something new</h4>
          <Form onSubmit={this.handleSubmit} />
          <a className="close-reveal-modal">&#215;</a>
        </div>
      </div>
    );
  }
});

La Form componente es bastante estándar:

Form = React.createClass({
  handleSubmit: function() {
    var body = this.refs.body.getDOMNode().value.trim();
    if (!body) {
      return false;
    }
    this.props.onSubmit({body: body});
    this.refs.body.getDOMNode().value = '';
    return false;
  },
  render: function(){
    return(
      <form onSubmit={this.handleSubmit}>
        <textarea name="body" placeholder="Say something..." ref="body" />
        <input type="submit" value="Send" className="button" />
      </form>
    );
  }
}); 

Problema: Cuando me hacen componente de formulario dentro de modal componente de formulario y escriba algo en la forma de entrada, a continuación, aparece en la consola de excepción Uncaught object. Esta es una pila:

Uncaught object
  invariant
  ReactMount.findComponentRoot
  ReactMount.findReactNodeByID
  getNode
  ...

Si acabo de render componente de formulario directamente en el componente de los padres, entonces todo funciona. Podría alguien ayudar por favor?

InformationsquelleAutor Voldy | 2014-06-16

2 Comentarios

  1. 12

    En resumen, que estamos haciendo esta mal y esta es no un error en reaccionar.

    Si usted utiliza cualquier tipo de plugin que modifica el reaccionar del componente nodos dom, a continuación, se va a romper cosas de una manera o de otra.

    Lo que usted debe hacer en su lugar es el uso de reaccionar a sí mismo, y complementarias de css, para colocar el componente en la forma que usted desearía para su cuadro de diálogo modal.

    Sugiero la creación de un componente que utiliza reaccionar del statics propiedad componente para definir un par de funciones de envoltura renderComponent para darle un bonito y limpio llamada de función para mostrar u ocultar una reaccionan de diálogo. He aquí un corte en el ejemplo de algo que yo he usado en el pasado. NB: Se hace uso de jQuery, pero usted puede reemplazar la jQ con el estándar de js llamadas a la api para cosas como elementById y etc si usted no desea que el código jQuery.

    window.MyDialog = React.createClass({
    propTypes: {
    title:      React.PropTypes.string.isRequired,
    content:    React.PropTypes.string.isRequired
    },
    statics: {
    //open a dialog with props object as props
    open: function(props) {
    var $anchor = $('#dialog-anchor');
    if (!$anchor.length) {
    $anchor = $('<div></div>')
    .prop('id', 'dialog-anchor');
    .appendTo('body');
    }
    return React.renderComponent(
    MyDialog(props),
    $anchor.get(0)
    );
    },
    //close a dialog
    close: function() {
    React.unmountComponentAtNode($('#dialog-anchor').get(0));
    }
    },
    //when dialog opens, add a keyup event handler to body
    componentDidMount: function() {
    $('body').on('keyup.myDialog', this.globalKeyupHandler);
    },
    //when dialog closes, clean up the bound keyup event handler on body 
    componentWillUnmount: function() {
    $('body').off('keyup.myDialog');
    },
    //handles keyup events on body
    globalKeyupHandler: function(e) {
    if (e.keyCode == 27) { //ESC key
    //close the dialog
    this.statics.close();
    }
    },
    //Extremely basic dialog dom layout - use your own
    render: function() {
    <div className="dialog">
    <div className="title-bar">
    <div className="title">{this.props.title}</div>
    <a href="#" className="close" onClick={this.closeHandler}>
    </div>
    </div>
    <div className="content">
    {this.props.content}
    </div>
    </div>
    }
    });

    Usted, a continuación, abra un cuadro de diálogo llamando:

    MyDialog.open({title: 'Dialog Title', content: 'My dialog content'});

    Y para cerrar con

    MyDialog.close()

    El cuadro de diálogo siempre se asocia a un nuevo nodo dom directamente bajo el cuerpo con el id de diálogo ‘ancla’. Si abre un cuadro de diálogo cuando uno ya está abierto, simplemente actualizar el dom basado en nuevos props (o no se si son la misma).

    De curso de pasar el contenido del diálogo como un atrezzo argumento no es particularmente útil. Yo por lo general se extienden a continuación a analizar las rebajas -> html para el contenido o conseguir un poco de html a través de una petición ajax dentro del componente cuando se suministra una dirección url como un accesorio en su lugar.

    Sé que el código anterior no es exactamente lo que estaban buscando, pero no creo que hay una buena manera de hacer que un dom-modificar el plugin de trabajo con reaccionar. Nunca se puede asumir que el dom representación de las reaccionar componente es estático y por lo tanto no puede ser manipulado por un plugin de 3 ª parte con éxito. Sinceramente, creo que si usted desea utilizar reaccionar de esta manera usted debe re-evaluar por qué estás utilizando el marco de trabajo.

    Que dijo, creo que el código de arriba es un gran punto de partida para un diálogo en el que todas las manipulaciones se produce en el interior del componente, que después de todo es lo que reactjs es todo acerca de!

    NB: código fue escrito muy rápidamente de la memoria y de hecho no probado en su forma actual, así que lo siento si hay algunos pequeños errores de sintaxis o algo.

    • Aunque entiendo que lo que dices es correcto, realmente no responde a la pregunta. El propósito de la Fundación es de modo que usted no tiene que rodar sus propios componentes para repetitivo cosas como esta. Sería interesante ver si había una manera de conseguir este trabajo, incluso si no es «la manera correcta». Sólo mis dos centavos.
  2. 5

    Aquí es cómo hacer lo que Mike hizo, pero el uso de una transmisión zf de revelar modal:

    var Dialog = React.createClass({
    statics: {
    open: function(){
    this.$dialog = $('#my-dialog');
    if (!this.$dialog.length) {
    this.$dialog = $('<div id="my-dialog" class="reveal-modal" data-reveal role="dialog"></div>')
    .appendTo('body');
    }
    this.$dialog.foundation('reveal', 'open');
    return React.render(
    <Dialog close={this.close.bind(this)}/>,
    this.$dialog[0]
    );
    },
    close: function(){
    if(!this.$dialog || !this.$dialog.length) {
    return;
    }
    React.unmountComponentAtNode(this.$dialog[0]);
    this.$dialog.foundation('reveal', 'close');
    },
    },
    render : function() {
    return (
    <div>
    <h1>This gets rendered into the modal</h1>
    <a href="#" className="button" onClick={this.props.close}>Close</a>
    </div>
    );
    }
    });

Dejar respuesta

Please enter your comment!
Please enter your name here