CodePen here（减去删除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({
...
});
});
以上不是问题，但我只是无法弄清楚如何在 react 中做到这一点，所以我只是尝试更新我的 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/（如 React.js 中的 Bootstrap 模式所建议的那样）。这是一个文档非常齐全的库，它有一个很好的模态。
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 方法中传递内容，因此请随意根据自己的需求调整此示例。