Подключите html-элемент формы типа object к объекту состояния в React
У меня есть два элемента формы, которые входят в один и тот же массив
<div className = "form-group">
<input
className = "form-control"
type = "text"
name = "user[username]"
value = {this.state.user.username}
onChange = {this.onChange}
placeholder = "Customer Name"
/>
</div>
<div className = "form-group">
<input
className = "form-control"
type = "text"
name = "user[mobilenumber]"
value = {this.state.user.mobilenumber}
onChange = {this.onChange}
placeholder = "Customer mbole no."
/>
</div>
В конструкторе я объявляю состояние следующим образом
this.state = {
user: { username: "", mobilenumber: "" },
clothname: "",
description: "",
errors: {}
};
Но при изменении значений в форме для пользователя [имя пользователя] и пользователя [номер мобильного] введенные значения не заполняются в пользовательском объекте состояния. Пока он работает для двух других переменных состояния «ткань» и «описание». У них есть простой атрибут имени, такой как «название ткани».
И метод onChange
onChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
обновлен метод onChange
Ответы 1
React обновляет дом только тогда, когда он может обнаруживать изменения. this.state.user - это объект. Когда вы изменяете свойство this.state.user, его ссылка не меняется, поэтому React считает, что пользовательский объект не изменен, и не обновляет DOM.
Решение - полностью обновить объект.
onChange(e) {
let state = {..this.state};
state[e.target.name] = e.target.value;
this.setState(state);
}
// I prefer this one
onUserChange(e) {
let user = {...this.state.user};
user[e.target.name] = e.target.value;
this.setState({ user });
}
Попался. Я должен выделить name = user [username] и user [mobilenumber] из html-элементов и сделать их простыми, такими как username и mobilenumber. Также свяжите элементы с другим методом onUserChange. Дай мне попробовать. Я надеялся, что можно будет изменить атрибут «name» элемента html, чтобы тот же onChange () уместил его.
@ piyesh-kumar ваше предложение сработало. Тем не менее, можете ли вы придумать какой-либо способ манипулировать атрибутом «name» элемента html, чтобы изменение можно было учесть в том же методе onChange.
Можете ли вы опубликовать метод
onChange