Entonces tengo el siguiente diálogo:
<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> Quiero hacer una llamada API REST con datos de esos campos al hacer clic en el botón "Agregar elemento". ¿Cómo obtengo esos valores de <TextField> s?
Debe hacer que su controlled component TextFields agregue estado a ellos:
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> )