javascript - ReactJS 类组件使用 contenteditable 元素渲染 array.map

Question

我遇到了一个无法调试的有趣问题。

目标

在渲染函数内部的类组件上，使用 this.state.items.map((item, index) => {}) 迭代来自 state 的对象数组 并返回一个 contentEditable 段落元素。

在每个 contentEditable 段落元素上，监听 onKeyUp 事件。如果 e.which 使用的键是 Enter (13) 键，则使用被键入元素的索引将新项目添加到 this.state.items ，以便使用 splice 在该索引之后插入一个新元素。

看到预期结果了吗？

没有。新添加的项目在渲染时被放置在循环的末尾。

示例情况和重现步骤:

1. 在第一个 P 元素中输入“test1”
2. 按 Enter 键(创建一个新的 P 元素并获得焦点)
3. 在新创建的第二个 P 元素中输入“test2”
4. 通过 shift+tab 或单击重新聚焦第一个 P 元素
5. 按回车键
6. 查看观察到的结果:创建了一个新的 P 元素并获得焦点，但它位于列表的末尾，而不是预期的位置，即“test1”和“test2"P 元素

<小时/>

这是我到目前为止的代码:

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使用上面的代码。

如果您执行上述步骤，您将看到我遇到的问题。

如果您需要任何进一步的信息，请告诉我，提前致谢!

附注如果我可以对代码进行任何改进，请告诉我。我已经在 React 中工作了很短的时间，并且希望获得有关如何使其更好/更干净的任何反馈。

已更新

向 P 元素添加了 key={index}。注意:这并不反射(reflect)任何答案，它只是为了与 ReactJS 列表渲染保持一致而添加的。

Answer 1

为了渲染项目列表，React 需要 key 来跟踪元素看到这个:https://reactjs.org/docs/lists-and-keys.html

这是您的更新fiddle那个工作..

<p ref={item.ref} 
   key={item.id}
   contentEditable 
   suppressContentEditableWarning 
   onKeyUp={e => this.handleParagraphKeyUp(e,