![](/img/trans.png)
[英]ReactJS: button (span) visual should re-render and change when clicked, but doesnt (using setState)
[英]How to “refresh” (re-render) button when text change while using FontAwesome?
我有以下用户界面:
然后根据需要执行的操作和来自后端的响应,从那里动态更改按钮Archive
和Unarchive
以及FontAwesome中的图标。 响应基本上如下所示:
{"row_id":"12518","status":true}
简而言之:
Unarchive
按钮并且响应为true
,则应该:删除背景色,将按钮文本更改为“ Archive
,将按钮类从“ unarchive-form
archive-form
更改为“ archive-form
然后将FontAwesome图标类,从fa fa-arrow-circle-up
到fa fa-arrow-circle-down
。 Archive
并且响应为true
则应该:添加蓝色背景,将按钮文本更改为“ Unarchive
,将按钮类从archive-form
unarchive-form
更改为“ unarchive-form
然后更改从fa fa-arrow-circle-down
到fa fa-arrow-circle-up
的FontAwesome图标类。 我几乎涵盖了所有内容(我将仅显示一种情况的来源,因为它几乎相同,并且我不想发表大量文章):
$.ajax({
url: '/ajax/forms/archive',
type: 'POST',
dataType: 'json',
data: {
form_id: ids
}
}).done(function (response) {
$.each(response, function (index, value) {
var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr'),
this_btn = this_row_tr.find('.archive-form');
if (value.status === true) {
// here I add the background color to the TR
this_row_tr.addClass('info');
// here I swap the button class
this_btn.removeClass('archive-form').addClass('unarchive-form');
// here I swap the button text and also the whole FontAwesome part
this_btn.text('<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Unarchive');
} else if (value.status === false) {
this_row_tr.addClass('error');
all_archived = false;
}
});
if (all_archived) {
toastr["success"]("The forms were archived successfully.", "Information");
} else {
toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
}
}).error(function (response) {
console.log(response);
toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
});
但是问题出在我更改FontAwesome的文本时,因为我得到的是纯文本而不是图标。 例如,单击第一行中的“ Unarchive
”将变为:
如您所见,除了FontAwesome图标之外,一切都很好。 有什么方法可以刷新按钮,使更改生效? 还是您知道实现此目标的其他方法?
您不必像现在一样更改文本,而只需使用.html()
并仅替换必要的字符串,就可以维护按钮内容的结构。
尝试这个:
// this one is for the Archive action
$.each(response, function (index, value) {
var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
var archiveToUnarchive = this_row_tr.find('.btn[class*="archive"]');
if (value.status === true) {
this_row_tr.addClass('info');
archiveToUnarchive.toggleClass('archive-form unarchive-form')
.html(archiveToUnarchive.html()
.replace('Archive', 'Unarchive')
.replace('fa-arrow-circle-down', 'fa-arrow-circle-up'));
} else if (value.status === false) {
this_row_tr.addClass('error');
all_deleted = false;
}
});
// this one is for the Unarchive action
$.each(response, function (index, value) {
var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
var unarchiveToArchive = this_row_tr.find('.btn[class*="archive"]');
if (value.status === true) {
unarchiveToArchive.toggleClass('archive-form unarchive-form')
.html(unarchiveToArchive.html()
.replace('Unarchive', 'Archive')
.replace('fa-arrow-circle-up', 'fa-arrow-circle-down'));
this_row_tr.removeClassName('info');
} else if (value.status === false) {
this_row_tr.addClass('error');
all_deleted = false;
}
});
据我了解,您只需要Archieve和UnArchieve的功能,
您可以尝试以下脚本吗
$(document).ready(function(){
$(".unarchive-form").click(unArchieveToArchieve);
$(".archive-form").click(archieveUnArchieve);
function unArchieveToArchieve(){
var btn = $(this);
var rowId = $(this).parent().parent().parent().find(".to-upload").attr("data-form");
var response = [{"row_id":rowId,"status" :true}];
$.each(response, function (index, value) {
var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
if (value.status === true) {
this_row_tr.attr('class','');
$(btn).text("Archieve");
$(btn).removeClass("unarchive-form");
$(btn).addClass("archive-form");
$(btn).click(archieveUnArchieve)
} else if (value.status === false) {
this_row_tr.attr('class','error');
all_deleted = false;
}
});
}
function archieveUnArchieve(){
var btn = $(this);
var rowId = $(this).parent().parent().parent().find(".to-upload").attr("data-form");
var response = [{"row_id":rowId,"status" :true}];
$.each(response, function (index, value) {
var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr');
if (value.status === true) {
this_row_tr.attr('class','info');
$(btn).text("Unarchive");
$(btn).removeClass("archive-form");
$(btn).addClass("unarchive-form");
$(btn).click(unArchieveToArchieve)
} else if (value.status === false) {
this_row_tr.attr('class' , 'error');
all_deleted = false;
}
});
}
});
我希望这能解决您的问题。
让我知道您是否需要更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.