Question

我在我的react组件中使用了带有contentEditable = true的div，

interface ContentEditableProps {
    onChange: (evevt) => void;
    onRef: (ref) => void;
    html: any;
}

class ContentEditable extends React.Component<ContentEditableProps, {}>{
    myRef: HTMLDivElement
    lastHtml: string
    constructor(props) {
    super(props);
    this.emitChange = this.emitChange.bind(this);
    this.onRef = this.onRef.bind(this)
}

emitChange(event) {
    this.props.onChange(event.target.innterText);
}

onRef(ref) {
    this.myRef = ref;
    this.props.onRef(ref);
}

render() {
        return <div
            onInput={this.emitChange}
            contentEditable={true}
            ref={this.onRef}
            dangerouslySetInnerHTML={{ __html: this.props.html }}
        >
        </div >;
    }

}

在generateChange上，我已经使用innterText显示在我的父组件中。

interface IndicatorInputState {
    html: any
}
class ParentComponent extends React.Component<{}, IndicatorInputState>{

    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);

        this.onRef = this.onRef.bind(this);

        this.state = {
            html:''
        }
    }

    onChange(value) {

         this.setState({html: `<span>${value}</span>`});

    }

    render() {
        return (
            <React.Fragment>

                <div className="indicator-input">
                    <ContentEditable onChange={this.onChange} html={this.state.html} onRef={this.onRef}   >

                    </ContentEditable>


                </div>
            </React.Fragment>
        )
    }
}
export default ParentComponent

在我的父组件中，我有一个状态（html）并通过该值设置html 在这种情况下，我没有问题，但是如果我使用span而不是仅仅使用value，那么我的光标就会出现异常行为，并且它会移到div的左侧有人知道我该如何将光标设置在右边？前提是每当用户写东西或使用退格键删除文本时，光标都必须在右边（顺便说一句：我使用css作为示例方向，但是由于退格键无法在正确的位置上使用，所以它没有用满）我的代码示例在这里：

https://codepen.io/saeedafroozi/pen/WYweeO?editors=1010

请帮助我

用span反应div内容可编辑的呈现值

0 个答案: