Часть кода ниже представляет собой двустороннюю привязку в ReactJS , тогда как один тип, текст и входные значения обновляются одновременно.
Вот цикл компонентов:
if (this.state.personState){
persons = (
<div>
{this.state.person.map( (person, index) =>{
return
<Person
click = {()=>this.deletePerson(index)}
name = {person.name}
age = {person.age}
key = {person.id}
changed = { (event)=>this.changeNameHandler(event, person.id)} >
</Person>
})}
</div>
)
Функция, которая обрабатывает событие
changeNameHandler = (event, id) => {
const personIndex = this.state.person.findIndex(person => person === id)
// making a copy and not manipulating the original reference
const personcpy = { ...this.state.person[personIndex] }
// assign the value of the event target
personcpy.name = event.target.value;
// making a copy of the state to update the dom
const persons = [...this.state.person]
// updating...
persons[personIndex] = personcpy
// state update
this.setState({ persons : persons })
}
Сам объект Javascript
state = {
person : [
{id:'12121', name:"Jimmy", age:12},
{id:'121s', name:"Jack", age:15},
{id:'23232a', name:"pouya", age:27}
]
}
Коды компонентов
const Person = (props) => {
return (
<div className="Person" >
<p onClick={props.click}>I'm {props.name} and I'm {props.age} years old</p>
<input onChange={props.changed} value={props.name} />
<h1 >{props.name}</h1>
</div>
)
}
Мне известно, что findIndex () возвращает индекс первого элемента в массиве, который удовлетворяет данному тесту.
И я проверяю, совпадает ли индекс события при изменении с объектным!
Однако, это не работает, и когда я пытаюсь набрать, он просто зависает
Я проверил инструменты разработчика Chrom и попытался там отладить, похоже, есть ошибка ссылки! но я не понимаю! как это могло быть?
Пожалуйста, помогите мне взглянуть с другой точки зрения.