我一直在尝试将我的Web应用程序中的一个页面从jQuery和Vanilla JS转换为React,但由于我对React不熟悉,所以我卡住了。目前,在该页面上,我有一个HTML表格,其中行与数据库表相关联,并且另有一列带有链接以编辑和删除行。这是通过打开包含表单的Bootstrap模态框来完成的,该表单为编辑操作填充了适当的行,还有一个删除模态框以确认删除,页面上还有一个链接以添加新行,也通过AJAX进行。因此,我正在尝试在React中复制这个功能,但似乎无法理解如何去做。目前我有这个(我在此示例中使用了通用组件名称(
通过ajax进行删除操作很顺利,服务器端响应了数据库表中的所有行(在删除完成后),所以json响应与页面加载时提供的初始数据完全相同,我只是想弄清楚如何更新状态,以便react知道删除我刚刚删除的记录。
同样地,我希望将其扩展到复制我的编辑和创建CRUD功能,但在阅读了许多博客文章后,我仍然无法找到所需的信息。 更新
ModelName
)以避免混淆实际名称。):var ModelNames = React.createClass({
getInitialState: function() {
return {model_names: this.props.model_names};
},
render: function() {
var rows = [];
this.props.model_names.forEach(function(model_name) {
rows.push(<ModelName model_name={model_name} key={model_name.id} />);
});
return (
<div className="row">
<div className="col-md-12">
<table 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 ModelName = React.createClass({
handleRemoveModelName: function() {
$.ajax({
url: '/model_name/ajax_delete',
data: { model_name_id: this.props.model_name.id },
type: 'POST',
cache: false,
success: function(data) {
this.setState({ model_names: data }); // this is the part I am having trouble with
}.bind(this),
error: function() {
console.log('error');
}.bind(this)
});
},
render: function() {
return (
<tr id={"model_name_" + this.props.model_name.id}>
<td>{this.props.model_name.property_1}</td>
<td>{this.props.model_name.property_2}</td>
<td className="text-center">
<a href="javascript:;" className="btn btn-xs" onClick={this.handleEditModelName}><i className="fa fa-pencil"></i></a> <a href="javascript:;" className="btn btn-xs" onClick={this.handleRemoveModelName}><i className="fa fa-remove"></i></a>
</td>
</tr>
);
}
});
ReactDOM.render(
// this comes from Rails
<ModelName model_names={<%= @model_names.to_json %>} />,
document.getElementById('react')
);
通过ajax进行删除操作很顺利,服务器端响应了数据库表中的所有行(在删除完成后),所以json响应与页面加载时提供的初始数据完全相同,我只是想弄清楚如何更新状态,以便react知道删除我刚刚删除的记录。
同样地,我希望将其扩展到复制我的编辑和创建CRUD功能,但在阅读了许多博客文章后,我仍然无法找到所需的信息。 更新
var ModelNames = React.createClass({
handleRemoveModelName: function(id) {
$.ajax({
url: '/model_name/ajax_delete',
data: { model_name_id: id },
type: 'POST',
cache: false,
success: function(data) {
this.setState({ model_names: data });
}.bind(this),
error: function() {
console.log('error');
}.bind(this)
});
},
render: function() {
var rows = [];
this.props.model_names.map(function(model_name) {
return (
<ModelName
model_name={model_name}
key={model_name.id}
onRemove={this.handleRemoveModelName}
/>
);
}, this);
// ...
}
});
var ModelName = React.createClass({
handleRemoveModelName: function() {
this.props.onRemove(this.props.model_name.id);
},
// ...
});
另外,为了尽可能包含所有相关内容,删除按钮仍然使用onClick={this.handleRemoveModelName}
来处理ModelName
的return
。
ModelNames
中使用状态了。让我更新我的答案。 - Felix Kling