REACT - Cómo poblar y mostrar el modo y luego enviar una solicitud Ajax en el momento de la presentación

Descripción del problema

codepen aquí (menos la solicitud de eliminación de Ajax): http://codepen.io/martincarlin87/pen/KzPWOw
Durante días, he estado tratando de aprender acerca de REACT y tratar de convertir una página en mi aplicación web para usarlo, no sólo jQuery y Vanilla JS.
Actualmente, hay una tabla html que muestra las filas de la tabla de base de datos, con una column a que contiene enlaces para editar y eliminar filas. Ayer, después de recibir ayuda sobre mi última pregunta, finalmente conseguí que Delete funcionara, así que ahora estoy tratando de ampliarlo y permitir la edición.
Hice que handleEditModel funcionara correctamente, pero no estaba seguro de cómo poblar y mostrar el modo desde allí. En segundo lugar, después de hacer clic en el botón enviar en el pie de página del modo, cómo enviar una solicitud Ajax.
Con jquery, puedo hacer lo siguiente:
$(document).on('shown.bs.modal', '#edit_model_modal', function () { 
    $('#edit_model_form input[name="model[property_1]"]').focus();
});

$('#edit_blackhole_form input').keypress(function (e) {
    if (e.which == 13) {
        $('#edit_model').click();
    }
});

$(document).on('click', '.edit_model_link', function() {
    // get data and populate modal form, then show:
    $('#edit_model_modal').modal('show');
});
Luego está otra función que maneja las solicitudes de commit y Ajax
$(document).on('click', '#edit_model', function() {
    // validate form
    $.ajax({
        ...
    });
});
Nada de esto es un problem a, pero simplemente no sé cómo implementarlo en REACT, así que estoy tratando de actualizar la página más simple de mi aplicación web para que sea más familiar para que pueda empezar a usarlo en otras páginas.
Siento que haya demasiado Código en el problema, pero sólo quiero proporcionar una imagen completa, pero si puedo conseguir esto, creo que puedo hacer el resto.
  var Models = React.createClass({
    
    getInitialState: function() {
      return {models: this.props.models};
    },

    handleEditModel: function(id) {
      // populate and show modal from here
      // and then be able to click the submit button to send the ajax request
    },

    handleRemoveModel: function(id) {
      $.ajax({           
        url: '/model/ajax_delete', 
        data: { model_id: id },
        type: 'POST',
        cache: false,           
        success: function(data) {
          this.setState({ models: data });
        }.bind(this),
        error: function() {
          console.log('error'); 
        }.bind(this)
      });
    },

    render: function() {

      var rows = [];
      
      this.state.models.map(function(model) {
        rows.push(
          <Model 
            model={model}
            key={model.id}
            onRemove={this.handleRemoveModel}
            onEdit={this.handleEditModel}
          />
        );
      }, this);

      return (
   
        <div className="row">
          <div className="col-md-12">
            <table id="models_list" className="table table-striped table-bordered table-hover">
              <thead>
                <tr role="row" className="heading">
                  <th>Property 1</th>
                  <th>Property 2</th>
                  <th className="text-center">Options</th>
                </tr>
              </thead>
              <tbody>{rows}</tbody>
            </table>
          </div>
        </div>
        
      );
    }
  });

  var Model = React.createClass({
    handleEditModel: function() {
      this.props.onEdit(this.props.model.id);
    },
    handleRemoveModel: function() {
      this.props.onRemove(this.props.model.id);
    },
    render: function() {
      return (
        <tr id={"model_" + this.props.model.id}>
          <td>{this.props.model.property_1}</td>
          <td>{this.props.model.property_2}</td>
          <td className="text-center">
            <a href="javascript:;" className="btn btn-xs" onClick={this.handleEditModel}><i className="fa fa-pencil"></i></a> <a href="javascript:;" className="btn btn-xs" onClick={this.handleRemoveModel}><i className="fa fa-remove"></i></a>
          </td>
        </tr>
      );
    }
  });

  var EditModelModal = React.createClass({
    render: function () {
      return (
        <div id="edit_model_modal" className="modal fade" tabIndex="-1" role="basic" aria-hidden="true">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 className="modal-title">Edit Model</h4>
              </div>
              <div className="modal-body">
                
                <form id="edit_model_form" action="#" className="form-horizontal">

                  <input type="hidden" name="model_id" value="" />

                  <div className="form-group">
                    <label className="col-md-3 control-label">Property 1 <span className="mandatory" aria-required="true">*</span></label>
                    <div className="col-md-9">
                      <input type="text" className="form-control input-medium" name="model[property_1]" />
                    </div>
                  </div>

                  <div className="form-group">
                    <label className="col-md-3 control-label">Property 2</label>
                    <div className="col-md-9">
                      <input type="text" className="form-control" name="model[property_2]" />
                    </div>
                  </div>

                </form>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn" data-dismiss="modal">Cancel</button>
                <button type="button" id="edit_model" className="btn" data-dismiss="modal">Edit</button>
              </div>
            </div>
          </div>
        </div>
      );
    }
  })

  ReactDOM.render(
    <Models models={<%= @models.to_json %>} />,
    document.getElementById('react')
  );
No creo que debas manejar tus propios detalles modales. Le sugiero que vea https://react-bootstrap.github.io/ (como se recomienda en Bootstrap modal in React.js). Esta es una buena biblioteca de documentos, tiene un buen patrón.
var Modal = ReactBootstrap.Modal
Luego se utiliza como

La mejor manera de resolver el problema

.
Tenga en cuenta que <Modal/> tiene un atributo Modal que muestra el modo cuando el atributo es show.
Es mejor usarlo, encapsularlo en sus propios componentes, donde almacena el Estado true. A continuación, declare un método abierto y cerrado y cambie el Estado en consecuencia.
var BootstrapModal = React.createClass({
    getInitialState : function () {
        return {
           show : false
        }
    },
    close: function() {
        if (!this.state.saving) {
            this.setState({
               show: false
            });
        }
    },
    open: function() {
        this.setState({
            show : true
        });
    },
    render: function() {
        return (
            <Modal show={this.state.show}>
                ...
            </Modal>
        );
    },
});
Cuando lo utilice en un componente externo, puede hacer lo siguiente:
var MyComponent = React.createClass({
    handleSomeEventInARowSomewhere : function () {
         ....
         this.refs.mymodal.open();
    },
    render : function () {
         return (
              ...
              <BootstrapModal ref="mymodal"/>
              ...
         )
    }
});
De esta manera, puede abrir sus modos cuando quiera, asegurándose de que puede transmitir información de una manera abierta, para que pueda modificar el ejemplo a voluntad.