所以我有一個以下對話框：
<Dialog>
<DialogContent sx={{ display: "flex", flexDirection: "column" }}>
<TextField
id="item-name"
label="Item Name"
/>
<TextField
id="item-description"
label="Item Description"
multiline
/>
</DialogContent>
<DialogActions>
<Button onClick={onAddDialogClose}>Cancel</Button>
<Button onClick={onAddNewItem}>Add Item</Button>
</DialogActions>
</Dialog>
我想在“添加專案”按鈕單擊時使用這些欄位中的資料進行 REST API 呼叫。如何從<TextField>s 中獲取這些值？
uj5u.com熱心網友回復：
您應該controlled component通過向它們添加狀態來制作您的 TextField：
const [itemName, setItemName] = useState('')
const [itemDest, setItemDest] = useState('')
const onAddNewItem = () => {
api.call(itemName, itemDest) // or whatever you want
console.log(itemName)
console.log(itemDest)
setItemName('')
setItemDest('')
}
return (
<Dialog>
<DialogContent sx={{ display: 'flex', flexDirection: 'column' }}>
<TextField
id="item-name"
label="Item Name"
value={itemName}
onChange={e => {
setItemName(e.target.value)
}}
/>
<TextField
id="item-description"
label="Item Description"
multiline
value={itemDest}
onChange={e => {
setItemDest(e.target.value)
}}
/>
</DialogContent>
<DialogActions>
<Button onClick={onAddDialogClose}>Cancel</Button>
<Button onClick={onAddNewItem}>Add Item</Button>
</DialogActions>
</Dialog>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/483135.html
標籤：javascript 反应 材料-ui
下一篇：查找陣列中的最低和最高數字值