Компонент класса ReactJS отображает array.map с использованием contenteditable элементов - PullRequest
Новая
       13

Компонент класса ReactJS отображает array.map с использованием contenteditable элементов

0 голосов
/ 18 октября 2018

У меня интересная проблема, которую я не могу отладить.

Цель

В компоненте класса, внутри функции рендеринга, выполнить итерацию по массиву объектовиз state, используя this.state.items.map((item, index) => {}) и вернуть contentEditable элемент абзаца.

В каждом элементе contentEditable параграфа прослушайте событие onKeyUp.Если ключ, используемый из e.which, является ключом ввода (13), добавьте новый элемент в this.state.items, используя индекс элемента, который был введен, чтобы вставить новый элемент после этого индекса, используя splice.

Видеть ожидаемый результат?

Нет.Недавно добавленный элемент помещается в конец цикла при его визуализации.

Пример ситуации и шаги для воспроизведения:

  1. Введите "test1" в первый элемент P
  2. Нажмите enter (создан новый элемент Pи сфокусировано)
  3. Введите "test2" в этот второй, недавно созданный, P элемент
  4. Перефокусируйтесь на первом P элементе, либо с помощью Shift + Tab, либо нажав
  5. См. Наблюдаемые результаты: новый элемент P создан и сфокусирован, но он находится в конце списка, а не там, где он должен быть, который находится между "test1"и "test2" P elements

Вот код, который у меня есть: 

class MyComponent extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            items: [this.paragraphTemplate()]
        }
    }

    render() {
        return (
            <section>
                <div>
                    {this.state.items.map((item, index) => {
                        return <p ref={item.ref} 
                                  key={index}
                                  contentEditable 
                                  suppressContentEditableWarning 
                                  onKeyUp={e => this.handleParagraphKeyUp(e, index, item)}></p>
                    })}
                </div>
            </section>
        )
    }

    handleParagraphKeyUp = (e, index, item) => {
        if (e.which === 13) {
            let addition = this.paragraphTemplate()

            this.setState(state => {
                state.items.splice(index + 1, 0, addition)

                return {
                    blocks: state.items
                }
            }, () => {
                addition.ref.current.focus()

                /* clear out the br and div elements that the browser might auto-add on "enter" from the element that was focused when the "enter" key was used */
                this.state.items[index].ref.current.innerHTML = this.state.items[index].ref.current.innerHTML.replace(/<br\s*[\/]?>/gi, '').replace(/<[\/]?div>/gi, '')
            })

            return false
        }
    }

    paragraphTemplate = () => {
        return {
            ref: React.createRef()
        }
    }
}

export default MyComponent

Вот jsfiddle скод сверху.

Если вы выполните вышеуказанные действия, вы увидите проблему, с которой я столкнулся.

Дайте мне знать, если вам требуется дополнительная информация, заранее спасибо!

PS Пожалуйста, дайте мне знать, если я могу внести какие-либо улучшения в код.Я работал в React в течение короткого периода времени, и мне очень хотелось бы получить какие-либо отзывы о том, как сделать его лучше / чище.

ОБНОВЛЕНО

Добавлено key={index} к элементу P.Примечание: это не отражает никаких ответов, оно было просто добавлено, чтобы оставаться в соответствии с отображением списка ReactJS.

1 Ответ

0 голосов
/ 18 октября 2018

, чтобы отобразить список элементов, React нужен ключ, чтобы отслеживать элемент:1007 *

...