我正在嘗試根據“型別”類別中的選擇來更改“類別”選擇欄位。因此，如果我從第一個選項中選擇“收入”，那么它只會顯示與收入相關的類別（收入、政府信用）。如果我選擇費用，它只會顯示費用類別（用品、租金、互聯網等）。
如果你有建議，或者我可以遵循的教程/視頻，那真的會對我有所幫助。這是我要完成的第一個編碼專案，我快完成了:)
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
const AddToFinancials = ({setUpdate}) => {
const dispatch = useDispatch()
const [type, setType] = useState('')
const [date, setDate] = useState('')
const [amount, setAmount] = useState('')
const [category, setCategory] = useState('')
const [details, setDetails] = useState('')
const handleAddExpense = (e) => {
e.preventDefault()
setUpdate()
// dispatch()
}
return (
<div>
<div>
<form className="ui form" onSubmit={handleAddExpense}>
<div className="ui fields">
<div className="ui field">
<select value={type} onChange={(e)=>setType(e.target.value)} className="ui fluid search dropdown" placeholder="Select type">
<option value="" disabled="disabled">Select transaction type</option>
<option>Income</option>
<option>Expense</option>
<option>RRSP Contribution</option>
<option>Donation</option>
</select>
</div>
<div className="ui field">
<input value={date} onChange={(e)=>setDate(e.target.value)} type="date" className="ui input" />
</div>
<div className="ui field">
<input value={amount} onChange={(e)=>setAmount(e.target.value)} className="ui input" type="text" placeholder="Amount"/>
</div>
<div>
{()=>{
switch (type) {
case 'income':
return (
<div className="ui field">
<select className="ui fluid search dropdown" placeholder="Select category">
<option value="" disabled="disabled">Select category</option>
<option>Revenue</option>
<option>Government credit</option>
</select>
</div>
)
case 'expense':
return (
<div className="ui field">
<select className="ui fluid search dropdown" placeholder="Select category">
<option value="" disabled="disabled">Select category</option>
<option>Advertising</option>
<option>Supplies</option>
</select>
</div>
)
case '':
return (
<div>
<select>
<option>non</option>
</select>
</div>
)
default:
return (
<div className="ui field">
<select className="ui fluid search dropdown" placeholder="Select category">
<option value="" disabled="disabled">Select category</option>
</select>
</div>
)
}
}}
</div>
<div className="ui field">
<input className="ui input" type="text" placeholder="Details"/>
</div>
<button type="submit" className="ui button">Add</button>
</div>
</form>
</div>
</div>
)
}
export default AddToFinancials
uj5u.com熱心網友回復：
您只需要在具有不同選擇組件的 div 中添加一個三元運算子，而不是呼叫函式：
<div className="ui field">
{ type ==='income' ? (
<select
className="ui fluid search dropdown"
placeholder="Select category"
>
<option value="" disabled="disabled">
Select category
</option>
<option>Revenue</option>
<option>Government credit</option>
</select>
) : type === 'expense' ? (
<select
className="ui fluid search dropdown"
placeholder="Select category"
>
<option value="" disabled="disabled">
Select category
</option>
<option>Advertising</option>
<option>Supplies</option>
</select>
) : type === '' ? (
<select>
<option>non</option>
</select>
) :(
<select
className="ui fluid search dropdown"
placeholder="Select category"
>
<option value="" disabled="disabled">
Select category
</option>
</select>
)}
</div>
uj5u.com熱心網友回復：
為了完整起見，您可以移動此塊：
switch (type) {
case 'income':
return ( <
div className = "ui field" >
<
select className = "ui fluid search dropdown"
placeholder = "Select category" >
<
option value = ""
disabled = "disabled" > Select category < /option> <
option > Revenue < /option> <
option > Government credit < /option> <
/select> <
/div>
)
case 'expense':
return ( <
div className = "ui field" >
<
select className = "ui fluid search dropdown"
placeholder = "Select category" >
<
option value = ""
disabled = "disabled" > Select category < /option> <
option > Advertising < /option> <
option > Supplies < /option> <
/select> <
/div>
)
case '':
return ( <
div >
<
select >
<
option > non < /option> <
/select> <
/div>
)
default:
return ( <
div className = "ui field" >
<
select className = "ui fluid search dropdown"
placeholder = "Select category" >
<
option value = ""
disabled = "disabled" > Select category < /option> <
/select> <
/div>
)
}成函式：
const renderDetails = (type) => {
switch (type) {
...
}
}并在 div 中呼叫該函式，如下所示：
<div>
{renderDetails(type)}
</div>之后，我會將整個 renderDetails 函式移動到一個單獨的模塊中并匯入它，這樣可以更輕松地為其創建單元測驗！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/345929.html
標籤：javascript 反应 形式 输入 动态形式
下一篇：GET輸入作為PHP陣列