I'm trying to make an entry in a text field and display the value in the field for each letter.
However, every time I type, I lose the focus in the field.
I use the whole thing within a dialog component of Material-Design
const [aendereEmail, setaendereEmail] = React.useState("");
<Dialog
onClose={userBearbeitenDialogClose}
aria-labelledby="responsive-dialog-title"
fullScreen={fullScreen}
open={userBearbeitenDialog}
>
<DialogTitle id="simple-dialog-title">User bearbeiten</DialogTitle>
<DialogContent dividers>
<Col md={12} style={{ textAlign: "center", marginTop: "20px" }}>
<TextField
id="email"
type="text"
variant="outlined"
label="eMail"
onChange={(e) => setaendereEmail(e.target.value)}
value={aendereEmail}
/>
</Col>
</Row>
</DialogContent>
<DialogActions>
<Button
color="primary"
onClick={() => userBearbeitenSpeichern(aktuellerUser)}
>
übernehmen
</Button>
</DialogActions>
</Dialog>
Related
Here in this one I have already declared the onClick but now I want to change the color of button whenever I click it should
<Button
className={classes.button_reset}
onClick={() => setShowResetPass((current) => !current)}
>
Reset Password
</Button>
<Button
sx={{ ml: "20px" }}
onClick={handleCancel}
className={classes.button_light}
>
Cancel
</Button>
<Grid md={6} xs={12}>
{showResetPass && (
<>
<Typography
color="#05445E"
fontFamily="'Jost', sans-serif"
fontSize={15}
sx={{ mt: "20px" }}
>
Enter New Password
</Typography>
<Input
className={classes.inputEmail}
fullWidth
type="password"
/>
</>
)}
This is the states I have used
const [showResetPass, setShowResetPass] = useState(false);
You could do something like that:
<Button
sx={{ ml: "20px" }}
onClick={handleCancel}
className={showResetPass ? classes.button_light : classes.button_dark }
>
I'm trying intergrate an option to display the data of a Card it's Dialog, with there being multiple Cards.
Right now I'm getting all the data from Firebase and each record is being displayed in a Card. The problem is that the Dialog will only display the data of the last looped item in the map, not of the Card that I'm trying to display in the Dialog.
How can I get the corresponding data from a Card and put it in it's Dialog? E.g: I open the Dialog of the 4th Card and only the data of the 4th Card gets displayed
The code:
useEffect(() => {
const getEvents = async () => {
const data = await getDocs(eventsRef);
data.forEach((doc) => {
setEventList(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
})
};
getEvents();
}, [])
return (
<>
<div className="stepper-title" style={{textAlign: "center"}}>
<b><h1>Aankomende afspraken</h1></b><br></br><p>Prik een afspraak die jou intereseerd</p>
</div>
<div className="event-list-container">
{
eventList && eventList.map((item, index) => {
return (
<div key={item.id}>
<Card variant="outlined" sx={{ width: 250 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
{item.date}
</Typography>
<Typography variant="h5" component="div">
{item.occasion.title}
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
{item.location}
</Typography>
<Typography variant="body2">
{item.occasion.description}
</Typography>
</CardContent>
<CardActions>
card {index}
<Button onClick={handleClickOpen} size="small" itemID={item.id}>bekijken</Button>
<Dialog open={open} onClose={handleClose} PaperProps={{elevation: 1}} hideBackdrop>
<DialogContent>
<TextField
label="Titel"
defaultValue={eventList[index].occasion.title}
fullWidth
variant="standard"
/>
<TextField
label="Description"
defaultValue={eventList[index].occasion.description}
fullWidth
variant="standard"
/>
<TextField
label="Datum"
defaultValue={eventList[index].date}
fullWidth
variant="standard"
/>
<TextField
label="Locatie"
defaultValue={eventList[index].location}
fullWidth
variant="standard"
/>
<TextField
label="Naam"
defaultValue={eventList[index].organizer.name}
fullWidth
variant="standard"
/>
<TextField
label="E-mailadres"
defaultValue={eventList[index].organizer.email}
fullWidth
variant="standard"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>terug</Button>
<Button onClick={handleClose}>Aanpassen</Button>
</DialogActions>
</Dialog>
</CardActions>
</Card>
</div>
)
})
}
</div>
</>
);
I have all my components contained in a <Box> tag and would like to separate the submit button from the 3 text fields. I tried using a <br /> tag and that did not work.
Here is the website
And here is the code I have:
<Box
component="form"
noValidate
autoComplete="off"
display="flex"
alignItems="center"
justifyContent="center">
<TextField
label="Height (Feet)"
id="outlined-start-adornment"
type='number'
sx={{ marginX: 2 }}
InputProps={{
startAdornment: <InputAdornment position="start">ft:</InputAdornment>,
}}
/>
<TextField
label="Height (Feet)"
id="outlined-start-adornment"
type='number'
sx={{ marginX: 2 }}
InputProps={{
startAdornment: <InputAdornment position="start">in:</InputAdornment>,
}}
/>
<TextField
label="Weight"
id="outlined-start-adornment"
type='number'
sx={{ marginX: 2 }}
InputProps={{
startAdornment: <InputAdornment position="start">lbs:</InputAdornment>,
}}
/>
<Button variant="contained" type='submit'>Submit</Button>
</Box>
You could simply move your Button outside of Box.
<Box>
// Your inputs...
</Box>
<Button />
You might need to wrap everything inside a React fragment <> // Your code... </>.
I just used the Form Dialog and input type="file" does not accept any files. Nothing happens when I click it. However, if i'll put it outside the Dialog, it works fine.
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Subscribe
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Add New Product</DialogTitle>
<DialogContent style={{ width: "450px" }}>
<form onSubmit={handleSubmit}>
<TextField
autoFocus
margin="dense"
id="text"
label="Name"
type="text"
fullWidth
/>
<input accept="image/*" type="file" />
</form>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button type="submit" color="primary">
Save
</Button>
</DialogActions>
</Dialog>
I have a draggable dialog with a couple of text fields for a user to fill in and submit. However, when I set the multiline option on a TextField, I am no longer able to click in the field and type. I can only type inside the field if I tab into it. The TextFields that are not multiline work the way I want. How do I make it so that I can click and type into the multiline TextField???
A couple code snippets included here...
This is from the Draggable Dialog:
function PaperComponent(props) {
return (
<Draggable cancel="input">
<Paper {...props} />
</Draggable>
);
}
const GenericDialog = props => {
return (
<Dialog
disableBackdropClick
disableEscapeKeyDown
disableRestoreFocus
fullWidth={true}
maxWidth={props.maxWidth}
open={props.open}
onClose={props.onClose}
PaperComponent={PaperComponent}
>
<DialogTitle>{props.dialogTitle}</DialogTitle>
{props.children}
<DialogActions>
<Button onClick={props.onSubmit} color="primary">
Submit
</Button>
<Button onClick={props.onClose} color="secondary" autoFocus>
Cancel
</Button>
</DialogActions>
)}
</Dialog>
This is how the text field that I am unable to click/type into is defined:
<TextField
style={{ margin: 0, width: '350px' }}
label="Task Description"
helperText="(1024 character maximum)"
inputProps={{ maxLength: 1024 }}
multiline
rows="4"
onChange={this.handleChange('taskDescription')}
value={this.state.task.taskDescription}
variant="outlined"
/>
My confusion was that I thought the TextField was an input. But with the multiline prop, it is instead a textarea. To resolve the problem, I changed the Draggable cancel prop to: cancel="input, textarea"
<TextField
style={{ margin: 0, width: '350px' }}
label="Task Description"
helperText="(1024 character maximum)"
inputProps={{ maxLength: 1024 }}
multiline
rows="4"
autoFocus={true}
onChange={this.handleChange('taskDescription')}
value={this.state.task.taskDescription}
variant="outlined"/>