我写了一个自定义内容可编辑组件,它看起来像下面这样:
无论我在可编辑内容中输入什么,光标都会移动到可编辑区域的开头。这是因为 this.props.onChange(value) 在外部更新了值并重新渲染了页面。如何防止重新渲染时重置光标?
export default class TextEditor extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
onChange = (e) => {
let value = e.target.innerHTML;
this.props.onChange(value);
}
render() {
const { enabled , onChange , style, className, value } = this.props;
return (
<div>
<div contentEditable={enabled}
dangerouslySetInnerHTML={{ __html: value }}
ref={this.ref}
onInput={this.onChange}
style={{
...style,
height: '80px',
overflow: 'auto',
cursor: enabled ? 'text' : 'inherit',
}}
className={`form-control form-control-sm ${className}`}
placeholder="Optional Notes..."
/>
</div>
)
}
}
无论我在可编辑内容中输入什么,光标都会移动到可编辑区域的开头。这是因为 this.props.onChange(value) 在外部更新了值并重新渲染了页面。如何防止重新渲染时重置光标?