Я создал приложение для списка задач, поэтому, естественно, я хотел сделать один из элементов списка редактируемым по клику. Я позаботился об обновлении состояния, в котором также хранится контент на Blur. Но я все еще получаю ошибки.
Предупреждение. Компонент contentEditable
содержит children
, управляемый React. Теперь вы обязаны гарантировать, что ни один из этих узлов не будет неожиданно изменен или дублирован. Вероятно, это не преднамеренно.
constructor(props) {
super(props);
this.state = {
userEntries: {},
itemOrder: [],
itemCrossed: [],
}
}
handleEdit = (e) => {
let targetID = e.target.getAttribute('associate');
let currentStore = this.state.userEntries;
currentStore[targetID].content = e.target.innerText;
this.setState({userEntries: {...currentStore}});
}
render() {
console.log(this.state);
return (
<div className="ToDoWrapper">
<div className="DoWrapper">
<UserInput handleEntries={this.handleEntries}/>
<ul >
{this.state.itemOrder.map( (item, index) => (
<div className="listDiv" key={item}>
//the line below
<li className="listItem" associate={item} onBlur={this.handleEdit} contentEditable="true" > {this.state.userEntries[item].content}</li>
//the line above
<div className="delete" associate={item} onClick={this.deleteTarget}> ✖ </div>
</div>
))}
{this.state.itemCrossed.map( (item, index) => (
<div className="listDiv" key={item + "crossed"}>
<li className="crossedItem" associate={item} onDoubleClick={this.crossItem}> <s>{this.state.userEntries[item].content} </s></li>
</div>
))}
</ul>
</div>
<Toolbar deleteAll={this.deleteAll}/>
</div>
)
}