小编Dam*_*ian的帖子

在Safari和Firefox的React中,Caret位置恢复到重新渲染的可疑范围的开始

在Safari或Firefox中将文本输入到可信范围内时,插入符号会在每个按键上移动到开头.只有在React重新/渲染组件时才会发生这种情况.

Chrome工作得很好.没有测试IE.


|插入符号和键入的示例Hello:

| |H |eH |leH |lleH |olleH

这是我的组件的简化版本:

import React, { Component } from 'react';

class ContentEditable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.value
        };
    }

    createMarkup() {
        return { __html: this.state.value };
    }

    handleInput(event) {
        this.setState({
            value: event.target.innerText
        });
    }

    isValid() {
        let bestLength = 3;

        return this.state.value.length > bestLength;
    }

    render() {
        let className = '';
        if (this.isValid()) {
            className = 'is-valid';
        }

        return (
            <span
                contentEditable="true"
                onInput={ this.handleInput.bind(this) …
Run Code Online (Sandbox Code Playgroud)

safari firefox caret contenteditable reactjs

9
推荐指数
1
解决办法
1302
查看次数

标签 统计

caret ×1

contenteditable ×1

firefox ×1

reactjs ×1

safari ×1