Несмотря на реализацию contentEditable с функцией onBlur, которая обновляет состояние, я все еще получаю предупреждения - PullRequest
0 голосов
/ 18 марта 2020

Я создал приложение для списка задач, поэтому, естественно, я хотел сделать один из элементов списка редактируемым по клику. Я позаботился об обновлении состояния, в котором также хранится контент на 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>
            )
    }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...