Question

这个问题具体针对反应 - 羽毛笔。我想做什么：在打字时用另一个替换反应 - 羽毛组件中的一些文本。例如：#s1将替换为productname(1eq, 100mg, 10ml)之类的内容。请注意，我不想使用JQuery。

到目前为止，我这样做了（下面的代码），但是一旦进行了修改，我就失去了关注，不知道如何取回它。更多通过控制台会抛出类型“给定范围不在文档中”的错误。所以基本上，它可以工作，但是用户必须单击组件才能继续输入，如果我在页面中有多个react-quill组件，它将滚动到firt react-quill对象（这在工作时不方便）最后一个）。

class Procedure extends Component {

constructor(props){
    super(props);
    this.state={
        content='';
    }
}

replaceTagByText(value){
   return value.replace(/#(\w+)\s/, myNewValue );
}

handleProcedureContentChange = (value) => {
    let newValue = replaceTagByText(value);
    this.setState({content:newValue});

};

render() {
    return (
      <div>
        <div style={styles.title}>My title</div>
        <ReactQuill
            key={"procedure_RTE_" + this.props.experimentId}
            value={this.state.content}
            modules={modules}
            formats={formats}
            onChange={this.handleProcedureContentChange}
        />

      </div>

    );
  }
}

请注意，代码已经过度简化，我使用redux来提供我的数据，但总体思路就在这里。

问题是：如何在打字时正确替换反应中的文本，而不会失去焦点并将光标保持在正确的位置。

Answer 1

如果终于找到解决方案。这个想法是跟踪编辑器，并设置正确的setSelection。更新的代码如下。

class Procedure extends Component {

constructor(props){
    super(props);
    this.state={
        content='';
    }
}

replaceTagByText(value){
   return value.replace(/#(\w+)\s/, myNewValue );
}
//Modification of the code is there
handleProcedureContentChange = (value) => {
    let newValueObject = replaceTagByText(value);
    this.setState({content:newValueObject.value});
    quillRef = this.refs.myQuillRef.getEditor();
    //I need that settimeout to do it after the update of my redux logic
    setTimeout(() => {
      quillRef.focus();
      quillRef.setSelection(newValueObject.indexAfterInsertion, 0, myQuillRef);
    }, 500);

};

render() {
    let myRef = (el) => this.myQuillRef = el;
    return (
      <div>
        <div style={styles.title}>My title</div>
        <ReactQuill
            key={"procedure_RTE_" + this.props.experimentId}
            ref={myRef}
            value={this.state.content}
            modules={modules}
            formats={formats}
            onChange={()this.handleProcedureContentChange}
        />

      </div>

    );
  }
}

React-Quill：如何在键入时动态替换文本，而不会失去焦点并将光标保持在正确的位置

1 个答案: