Javascript 如何在羽毛笔中设置字符长度

如何在react quill中设置字符长度。在文档中，getLength（）将在编辑器中返回字符的长度

但我不知道如何实施它

我的JSX

//OnChange处理程序
handleChange=（值）=>{
this.setState（{text:value}）
}
//最大值检查器
checkCharacterCount=（事件）=>{
if（this.getLength（）.length>280&&event.key！=='Backspace'）{
event.preventDefault（）；
}
}

以下各项应能起作用：

class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.quillRef = null;      // Quill instance
    this.reactQuillRef = null;
    this.state = {editorHtml : ''};
  }
  componentDidMount() {
    this.attachQuillRefs()
  }

  componentDidUpdate() {
    this.attachQuillRefs()
  }

  attachQuillRefs = () => {
    if (typeof this.reactQuillRef.getEditor !== 'function') return;
    this.quillRef = this.reactQuillRef.getEditor();
  }
  handleChange (html) {
    var limit = 10;
    var quill = this.quillRef;
    quill.on('text-change', function (delta, old, source) {
      if (quill.getLength() > limit) {
       quill.deleteText(limit, quill.getLength());
      }
    });
    this.setState({ editorHtml: html });
  }


  render () {
    return  <ReactQuill 
            ref={(el) => { this.reactQuillRef = el }}
            theme="snow"
            onChange={this.handleChange}
            value={this.state.editorHtml}
            />
  }
}

类编辑器扩展React.Component{
建造师（道具）{
超级（道具）
this.handleChange=this.handleChange.bind（this）
this.quillRef=null；//Quill实例
this.reactQuillRef=null；
this.state={editorHtml:''}；
}
componentDidMount（）{
这个。附件quillrefs（）
}
componentDidUpdate（）{
这个。附件quillrefs（）
}
附件引用=（）=>{
if（typeof this.reactQuillRef.getEditor！=“function”）返回；
this.quillRef=this.reactQuillRef.getEditor（）；
}
handleChange（html）{
var限值=10；
var quill=this.quillRef；
quill.on（'text-change'，函数（delta、old、source）{
if（quill.getLength（）>限制）{
quill.deleteText（limit，quill.getLength（））；
}
});
this.setState（{editorHtml:html}）；
}
渲染（）{
返回{this.reactQuillRef=el}}
主题=“雪”
onChange={this.handleChange}
值={this.state.editorHtml}
/>
}
}

我认为您缺少对

ReactQuill

组件本身的引用。没有该引用，您将无法访问其任何非特权方法（例如

getLength（）

）。您可以通过

handleChange

方法（即onChange prop上的第四个参数）获取副本，但我建议您只需向

ReactQuill

组件添加一个单独的ref prop并使用它。下面是一个重新编写为功能组件的示例（…自2020年以来）：

导出常量编辑器=（）=>{
const[value，setValue]=React.useState（null）；
const reactQuillRef=React.useRef（）；
常量handleChange=（值）=>setValue（值）；
常量checkCharacterCount=（事件）=>{
const unprivilegeditor=reactQuillRef.current.unprivilegeditor；
if（unprivilegedEditor.getLength（）>280&&event.key！=='Backspace'）
event.preventDefault（）；
};
返回(
) 
}

export const Editor = () => {
  const [value, setValue] = React.useState(null);
  const reactQuillRef = React.useRef();

  const handleChange = (value) => setValue(value);

  const checkCharacterCount = (event) => {
    const unprivilegedEditor = reactQuillRef.current.unprivilegedEditor;
    if (unprivilegedEditor.getLength() > 280 && event.key !== 'Backspace')
      event.preventDefault();
  };

  return (
    <ReactQuill theme='snow' 
      onKeyDown={checkCharacterCount}
      ref={reactQuillRef}
      value={this.state.text}
      onChange={this.handleChange}
      modules={modules}
      formats={formats} /> 
  ) 
}