React Как изменить значение value у input с последующим сохранением его состояния?
Помогите разобраться с вопросом подъёма состояний в React вот на таком упрощенном примере
import React from "react";
class ProfileForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
value: event.target.value
});
}
handleSubmit(event) {
alert("Отправленное имя: " + this.state.value);
event.preventDefault();
}
render() {
const currentUser = this.props.users[this.props.userIndex];
let userNick = currentUser.name;
let userName = currentUser.fullName;
let userTelegram = currentUser.telegram;
//console.log("currentUser", currentUser);
return ( <
div className = "profile_form__full" >
<
form className = "profile_form"
onSubmit = {
(event) => this.handleSubmit(event)
} >
<
input className = "profile_form__input"
type = "text"
name = "name"
value = {
userNick
}
onChange = {
(event) => this.handleChange(event)
}
/> <
button className = "profile_form__change"
type = "button" > < /button> <
/form> <
form className = "profile_form"
onSubmit = {
(event) => this.handleSubmit(event)
} >
<
input className = "profile_form__input"
type = "text"
name = "fullName"
value = {
userName
}
/> <
button className = "profile_form__change"
type = "button" > < /button> <
/form> <
form className = "profile_form"
onSubmit = {
(event) => this.handleSubmit(event)
} >
<
input className = "profile_form__input"
type = "text"
name = "telegram"
value = {
userTelegram
}
/> <
button className = "profile_form__change"
type = "button" > < /button> <
/form> <
/div>
);
}
}
export default ProfileForm;
Задача состоит в том что бы изменяя поля input-ов, а потом нажимая кнопки отравить, компоненты в проекте сохраняли значения name fullName telegram у определенного пользователя. (Перезаписывали свои состояния) Подскажите, пожалуйста, как это реализуется ?
Правильно ли я понимаю, что state в данном случае надо хранить в компоненте App что б он менялся по всему проекту?