- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是我第一次使用 React hooks,我偶然发现了一个我无法解决的问题。我正在使用 formAmount
Hook 获取输入值并将其存储在 state.amount
中。当发生这种情况时,每当用户输入时,总计金额应该减少到一个数字。问题是我无法在 onChange
事件中创建一个新数组,因为它对键,它没有给我完整的数字,我不能直接在 state.amount
上设置它。我怎样才能得到这个数量并将其存储在一个数组中?
这是我的代码:
const Transactions = () => {
const [state, setState] = useState([
{
expense: [],
amount: [],
id: ''
}
])
const [formExpense, setFormExpense] = useState('')
const [formAmount, setFormAmount] = useState([])
const handleSubmit = (e) => {
e.preventDefault();
addExpense()
e.target.reset()
}
// add total of array of amount
let sum = formAmount.reduce((accumulator, currentValue) => {
{ return accumulator += currentValue }
}, 0)
// push value of input to array
const addExpense = (e) => {
setState([...state, { expense: formExpense, amount: [...formAmount], id: Math.random() * 100 }])
}
return (
<div className="transactions">
<div className="expenses">
<form onSubmit={handleSubmit}>
<input
type="text"
id="expense"
className="formfield"
name="expense"
placeholder="Expense..."
onChange={(e) => setFormExpense(e.target.value)}
/>
<input
type="text"
id="amount"
className="formfield"
name="amount"
placeholder="Amount..."
onChange={(e) => setFormAmount([Number(e.target.value)])}
/>
<button type="submit">Submit</button>
</form>
</div>
<div className="finalbalance ">
<div className="finalexpense final">
Total Expense
{'$' + sum.toLocaleString()}
{
state.map(stat => {
return (
<div key={stat.id}>
<h3 className="outputexpense output">{stat.expense + stat.amount}</h3>
</div>
)
})
}
</div>
</div>
</div>
)
}
最佳答案
这就是给你的答案。我也做过 fiddle here
function Transaction(props){
const [listOfExpenses, setlistOfExpenses] = React.useState([]);
const [expense, setExpense] = React.useState("");
const [amount, setAmount] = React.useState(0);
const [totalExpenditure, setTotalExpenditure] = React.useState(0);
const handleInputChange = (hookSetterMethod) => (e) =>{
let {value} = e.target;
return hookSetterMethod(value);
}
const addExpense = (expenseObject) => {
setlistOfExpenses([...listOfExpenses, expenseObject])
}
const getTotalExpenditure = (listOfExpenses) =>
{
if(listOfExpenses.length > 0)
{
let tempExpenseAmountList = listOfExpenses.map((expense, id)=>{
if(expense.amount)
{
return expense.amount;
}else{
return 0;
}
});
return tempExpenseAmountList.reduce((accumulator, currentVal)=>{
return Number(accumulator) + Number(currentVal);
})
}
return 0;
}
React.useEffect(()=>{
setTotalExpenditure(getTotalExpenditure(listOfExpenses));
}, [listOfExpenses])
const handleFormSubmission = (e) =>{
e.preventDefault();
addExpense({
amount,
expense
});
}
const renderExpenses = (expenseList) => {
return expenseList.map((expense, id)=>{
return (
<tr key={id}>
<td>{++id}</td>
<td>{expense.expense}</td>
<td>: ${expense.amount}</td>
</tr>
)
});
}
return(
<div>
<div>
<h1>Add your expenses below</h1>
<form onSubmit={handleFormSubmission}>
<div>
<label>Expense</label>
<input value={expense} onChange={handleInputChange(setExpense)} />
</div>
<div>
<label>Amount</label>
<input value={amount} onChange={handleInputChange(setAmount)} />
</div>
<div>
<button type="submit">Add Expense</button>
</div>
</form>
</div>
<hr />
<div>
<table>
<tr>
<th>
<td>Id</td>
<td>Expense</td>
<td>Amount</td>
</th>
</tr>
{renderExpenses(listOfExpenses)}
<tr className="total">
<td>Total Expenses</td>
<td>: ${totalExpenditure}</td>
</tr>
</table>
</div>
</div>
);
}
ReactDOM.render(<Transaction />,
document.getElementById("root"));
table{
margin-top: 15px;
}
.total{
display: table;
border-top: 1px solid #434649;
border-bottom: 2px double #434649;
color: #f80000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - 已经设置后,如何将 React Hooks 设置为另一个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63441259/
一段时间以来,我一直在做这个反复出现的噩梦(阅读 - 我的应用程序中的错误)。出于某种原因,某个计时器在我停止后继续发送“Elapsed”事件,即使 在事件本身 计时器“承认”已被禁用!检查一下: /
为了找到 2 个 git 分支的共同祖先,需要做的是: git merge-base branch another_branch 好的。但是……如果两个分支都已经 merge 了怎么办?当我在这种情况
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 可以用事实和引用来回答它. 1年前关闭。 Improve this
我想要一个相机 View ,可以将图像捕获到本地文件或让用户从本地照片库中选择图像。我想也许有人为此编写了很好的库/代码。也许我可以利用它。已经有好的了吗?谢谢。我只是避免重新发明轮子:) 最佳答案
我从 master 分支创建了一个功能分支。之后有来自功能分支的提交 [F1]。 [F1] -- Feature Branch / [M1]-[M2
我喜欢使用 .NET 进行编程,尤其是 C# 3.0、.NET 3.5 和 WPF。但我特别喜欢的是 Mono .NET 确实与平台无关。 现在我听说了 Mono 中的 Olive 项目。我找不到某种
介绍和搜索 所以我认为我犯了一个严重的错误,我很担心。我已经分析了独立负责人的论坛,我已经接近找到答案,但场景太具体,不适用于我所在的位置。如果您找到可以回答我的问题的特定主题,请链接我。 例如:Ho
我有一个类似于下图的提交图。标记为 * 的提交表示大量提交。 A* | B--------- | | C* D* master 和 cor
我喜欢使用 .NET 进行编程,尤其是 C# 3.0、.NET 3.5 和 WPF。但我特别喜欢的是 Mono .NET 确实与平台无关。 现在我听说了 Mono 中的 Olive 项目。我找不到某种
我们最近接手了一个 .NET 项目,在查看 db 后,我们在某些列中有以下内容: 1)某些列具有诸如" & etc etc 2) 有些有 标签和其他非 html 编码的标签 这些数据
你好,当我导航到应用程序中的另一个页面时出现此错误 我不知道为什么这个错误出现 #0 _AsyncCompleter.complete (dart:async/future_impl.da
我使用以下 C 算法计算数据的 CRC32: #define CRC32_POLYNOM_REVERSED 0xEDB88320 uint32 calcCrc32(uint8* buffer, u
我试图在我的一个测试中断言模型中的字段没有改变。我知道从哲学上这是不正确的,但由于我控制了我需要知道的所有变量,所以我只想检查我的数据库条目是否没有改变。 我愿意接受一个解决方案,该解决方案可以将其转
我是 GitHub 的新手。并通过 Eclipse 使用它我们是两个人在开发一个应用程序。当我在 Git shell 中检查 git status 时,我得到以下状态。 On branch maste
简单代码: std::ifstream file("file.txt"); std::string line; while(getline(file,line)) ; //exhaust file
是的,我又找不到这个 Gradle DSL 方法:'compile()' 问题。 我检查了我有: buildscript { repositories { jcenter()
HTML: articles CSS: #main_menu { float: left; padding-top: 10px; vertical-align: m
我是一名优秀的程序员,十分优秀!