Помогите с кейсом,нужно сделать post запрос получить данные пользователя fio,inn,password и записать их в стейт потом отобразить в input и что бы администратор мог изменить значение в инпутах и при submit отправился patch запрос.
данные у меня отображаются в инпутах, но при вводе символа происходит ререндер и сбрасывается фокус как убрать ререндер и что бы механика показать значения со стейта и отредактировать его в инпутах ?
import React, { useState, useEffect } from "react";
import clsx from "clsx";
import axios from "axios";
import { useHistory } from "react-router-dom";
const EditCurentUser = props => {
const [formData, setFormData] = React.useState({
//example data
fio: "Ivan",
inn: "3414125",
password: "qwerty221",
});
const id = props.match.params.id;
useEffect(() => {
.get(
`https://example.com`
)
.then(result => setFormData(result.data));
console.log(users);
}, []);
const loginHandler = e => {
e.preventDefault();
//patch request
};
const onChangeHandler = e => {
setFormData({ fio: e.target.value });
return (
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={6}>
<Paper className={fixedHeightPaper}>
<form className={classes.form} onSubmit={loginHandler}>
<Typography component="h1" variant="h6">
Изменить данные пациента
</Typography>
{console.log(users)}
<TextField
onChange={e =>
setFormData({ ...formData, fio: e.target.value })
}
variant="outlined"
margin="normal"
required
fullWidth
name="fio"
label="Фамилия Имя Отчество"
type="text"
id="fio"
autoComplete="current-fio"
key={`${Math.floor(Math.random() * 1000)}-min`}
defaultValue={formData.fio}
/>
<TextField
onChange={e =>
setFormData({ ...formData, inn: e.target.value })
}
key={`${Math.floor(Math.random() * 1000)}-min`}
variant="outlined"
margin="normal"
required
fullWidth
name="inn"
label="Идентификационный номер"
type="text"
id="inn"
autoComplete="current-inn"
/>
<TextField
onChange={onChangeHandler}
defaultValue={formData.fio}
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Пароль"
type="text"
id="password"
autoComplete="current-password"
key={`${Math.floor(Math.random() * 1000)}-min`}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Внести изменения
</Button>
</form>
</Paper>
</Grid>
</Grid>
<Box pt={4}>
<Copyright />
</Box>
</Container>
</main>
</div>
</ThemeProvider>
);
};
export default EditCurentUser;
Немного затупил,вот так решил .
const [formData, setFormData] = React.useState({
fio: "Ivan Petrov Dashfa",
inn: "3414125",
password: "qwerty221",
});
const onChangeHandler = e => {
setFormData({ fio: e.target.value });
};
<TextField
value={formData.fio}
onChange={onChangeHandler}
variant="outlined"
margin="normal"
required
fullWidth
name="fio"
label="Фамилия Имя Отчество"
type="text"
id="fio"
autoComplete="current-fio"
/>
Делаю скрипт на jquery, который должен добавлять к определенному символу/словосочетанию/цифрам также определенные символы/словосочетания/цифрыНапример...
Я использую состояние все работает нормально, за исключением модального окнаВнутри состояния, я использую объекты, которые нормально отображаются...
Гитхаб проекта:https://githubcom/DeadSidert/telegramBotMoney Первый раз деплою приложения