Javascript 反应:过滤器阵列:我可以使用没有';你不能通过考试吗?
我正在开发React应用程序。在我的React应用程序中,我在“价格”弹出窗口中有一个价目表,我可以通过编码编辑、添加或删除价目表中的每个项目。但是,我需要修改delete函数,将按钮的状态从disable更改为active 我已经设置好,如果我在“价格”弹出窗口中“添加”价格,“添加”按钮现在被禁用,以防止添加更多条目,因为价格条目应限制为每天一个条目 因此,我的delete函数的编码方式是,它过滤价目表并从价目表中删除价格Javascript 反应:过滤器阵列:我可以使用没有';你不能通过考试吗?,javascript,arrays,reactjs,Javascript,Arrays,Reactjs,我正在开发React应用程序。在我的React应用程序中,我在“价格”弹出窗口中有一个价目表,我可以通过编码编辑、添加或删除价目表中的每个项目。但是,我需要修改delete函数,将按钮的状态从disable更改为active 我已经设置好,如果我在“价格”弹出窗口中“添加”价格,“添加”按钮现在被禁用,以防止添加更多条目,因为价格条目应限制为每天一个条目 因此,我的delete函数的编码方式是,它过滤价目表并从价目表中删除价格 handleDeletePrice = deletePrice =&
handleDeletePrice = deletePrice => {
// const { date } = this.props;
this.setState(prevState => ({
// spreads out the previous list and delete the price with a unique id
priceArr: prevState.priceArr.filter(item => item.date !== deletePrice)
}));
};
我试图做的是检查删除价格的日期是否与添加价格的今天的日期相同。如果删除的价格日期是今天,那么我将激活“价格”弹出窗口中的“添加”按钮,以便添加另一个今天的价格
以下是我的尝试,不起作用:
handleDeletePrice = deletePrice => {
// const { date } = this.props;
this.setState(prevState => ({
// spreads out the previous list and delete the price with a unique id
priceArr: prevState.priceArr.filter(item => {
if (item.date !== deletePrice) {
return item;
}
if (deletePrice == todaydate) {
return buttonDisabled: true;
}
})
}));
};
禁用的按钮是一种状态
constructor(props) {
super(props);
this.state = {
priceArr: this.props.pricelist,
showPricePopup: false,
addPricePopup: false,
todaydate: new Date().toLocaleDateString(),
date: props.date || "",
number: props.number || "",
buttonDisabled: this.props.buttonStatus
};
}
我是否需要使用不同的方法遍历价格数组,例如forEach
,将删除的价格推送到另一个数组中,然后过滤删除的数组,查看它是否与今天的日期匹配,以激活按钮
您可以在上查看我的代码沙盒演示。您可以根据deletePrice是否等于今天的日期来更新buttonDisabled标志,如果它等于今天的日期,则button disabled为false,反之亦然。我在代码沙盒中尝试过,添加按钮再次启用
此外,deletePrice变量可以命名为deletePriceDate,以便更好地表示
handleDeletePrice = deletePrice => {
const { todaydate } = this.state;
console.log("deletePrice", deletePrice);
this.setState(prevState => ({
// spreads out the previous list and delete the price with a unique id
priceArr: prevState.priceArr.filter(item => item.date !== deletePrice),
buttonDisabled: !(deletePrice === todaydate)
}));
};
另外,关于未通过过滤测试的元素的原始函数,lodash库确实有一个拒绝函数,但没有javascript方法。数据结构的一点小小改变可能会解决您的问题。您可以使用javascript代替priceArr数组。按钮的禁用状态仅取决于价目表的一个条目。使用Map,您只需检查特定日期的条目是否存在。它还将有助于删除,并且可以避免在同一数组上反复迭代。如果您在代码方面需要更多帮助,请告诉我。谢谢!当我从一个复杂的角度思考解决方案时,它变得如此简单。。。