javascript - React-如何填充并显示模态，然后在提交时发送AJAX请求

此处的CodePen（减去删除Ajax请求）：http://codepen.io/martincarlin87/pen/KzPWOw

我一直在尝试学习React几天，并尝试在我的Web应用程序中转换一个页面以使用它，而不仅仅是jQuery和Vanilla JS。

目前，有一个HTML表，该表显示数据库表中的行，其中的列包含用于编辑和删除行的链接。在收到有关上一个问题的帮助后，我最终设法在昨天完成了删除工作，因此我现在尝试扩展它并允许编辑。

我正在使用handleEditModel，但是我不确定如何从那里填充并显示模式，其次，一旦单击模式页脚中的“提交”按钮，如何发送ajax请求。

使用jQuery，我会做类似的事情：

$(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');
});

然后是另一个处理提交和ajax请求的功能

$(document).on('click', '#edit_model', function() {
    // validate form
    $.ajax({
        ...
    });
});

上面不是问题，但是我只是无法理解如何做，所以我只是想更新Web应用程序中最简单的页面以使其更加熟悉，以便可以在其他应用程序上开始使用它。页面。

对于问题中的大量代码表示歉意，但我只想提供一个完整的图片，但是如果我能得到这个，我想我将能够完成其余工作。

  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')
  );

最佳答案

我认为您不应该自行管理模态详细信息。我建议您看一下https://react-bootstrap.github.io/（在Bootstrap modal in React.js中建议）。这是一个文档齐全的库，并且其中包含一个不错的Modal。

var Modal = ReactBootstrap.Modal

然后将其用作<Modal/>。

请注意，Modal具有show属性，当它是true时，将显示模式。

最好使用它是将其包装在存储状态{show : true/false}的自己的组件中。然后声明一个打开和关闭方法，以相应地更改状态。

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>
        );
    },
});

当您在外部组件中使用它时，您可以执行以下操作：

var MyComponent = React.createClass({
    handleSomeEventInARowSomewhere : function () {
         ....
         this.refs.mymodal.open();
    },
    render : function () {
         return (
              ...
              <BootstrapModal ref="mymodal"/>
              ...
         )
    }
});

这样，您可以在需要时打开模式，看到可以在open方法中传递内容，因此可以根据自己的需要随意调整此示例。

关于javascript - React-如何填充并显示模态，然后在提交时发送AJAX请求，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35624858/