So begrenzen Sie die maximale Länge des Entwurfs js

Question

Wie können maximale Zeichen im Entwurf js begrenzt werden?

Ich kann Länge des Staates so, aber wie man aufhört, Komponente zu aktualisieren?

var length = editorState.getCurrentContent().getPlainText('').length; 

Answer 1

sollten Sie handleBeforeInput und handlePastedText Requisiten definieren. In Handler-Funktionen überprüfen Sie die Länge des aktuellen Inhalts + Länge des eingefügten Textes und wenn sie das Maximum erreicht, sollten Sie 'handled' string zurückgeben.

Arbeitsbeispiel - https://jsfiddle.net/mnkou1mL/

const {Editor, EditorState} = Draft; 

const MAX_LENGTH = 10; 

class Container extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     editorState: EditorState.createEmpty() 
    }; 
    } 
    render() { 
    return (
     <div className="container-root"> 
     <Editor 
      placeholder="Type away :)" 
      editorState={this.state.editorState} 
      handleBeforeInput={this._handleBeforeInput} 
      handlePastedText={this._handlePastedText} 
      onChange={this._handleChange} 
     /> 
     </div> 
    ); 
    } 

    _getLengthOfSelectedText =() => { 
    const currentSelection = this.state.editorState.getSelection(); 
    const isCollapsed = currentSelection.isCollapsed(); 

    let length = 0; 

    if (!isCollapsed) { 
     const currentContent = this.state.editorState.getCurrentContent(); 
     const startKey = currentSelection.getStartKey(); 
     const endKey = currentSelection.getEndKey(); 
     const isBackward = currentSelection.getIsBackward(); 
     const blockMap = currentContent.getBlockMap(); 
     const startBlock = currentContent.getBlockForKey(startKey); 
     const endBlock = currentContent.getBlockForKey(endKey); 
     const isStartAndEndBlockAreTheSame = startKey === endKey; 
     const startBlockTextLength = startBlock.getLength(); 
     const endBlockTextLength = endBlock.getLength(); 
     const startSelectedTextLength = startBlockTextLength - currentSelection.getStartOffset(); 
     const endSelectedTextLength = currentSelection.getEndOffset(); 
     const keyAfterEnd = currentContent.getKeyAfter(endKey); 

     if (isStartAndEndBlockAreTheSame) { 
     length += currentSelection.getEndOffset() - currentSelection.getStartOffset(); 
     } else { 
     let currentKey = startKey; 
     let counter = 0; 

     while (currentKey && currentKey !== keyAfterEnd) { 
        if (currentKey === startKey) { 
      length += startSelectedTextLength + 1; 
      } else if (currentKey === endKey) { 
      length += endSelectedTextLength; 
      } else { 
      length += currentContent.getBlockForKey(currentKey).getLength() + 1; 
      } 

      currentKey = currentContent.getKeyAfter(currentKey); 
     }; 
     } 
    } 

    return length; 
    } 

    _handleBeforeInput =() => { 
    const currentContent = this.state.editorState.getCurrentContent(); 
    const currentContentLength = currentContent.getPlainText('').length 

    if (currentContentLength > MAX_LENGTH - 1) { 
     console.log('you can type max ten characters'); 

     return 'handled'; 
    } 
    } 

    _handlePastedText = (pastedText) => { 
    const currentContent = this.state.editorState.getCurrentContent(); 
    const currentContentLength = currentContent.getPlainText('').length; 
    const selectedTextLength = this._getLengthOfSelectedText(); 

    if (currentContentLength + pastedText.length - selectedTextLength > MAX_LENGTH) { 
     console.log('you can type max ten characters'); 

     return 'handled'; 
    } 
    } 

    _handleChange = (editorState) => { 
    this.setState({ editorState }); 
    } 
} 

ReactDOM.render(<Container />, document.getElementById('react-root')); 

Answer 2

Mikhails Methoden sind korrekt, aber der Handler Rückgabewert ist nicht. 'not_handled' ist ein Fall-through-Fall, bei dem die Editor-Komponente die Eingabe normal verarbeiten kann. In diesem Fall möchten wir den Editor daran hindern, Eingaben zu verarbeiten.

In älteren Versionen von DraftJS sieht es aus wie das Vorhandensein einer Zeichenfolge, die in dem Behandlungscode als 'wahr' ausgewertet wird, und so verhielt sich der obige Code korrekt. In späteren Versionen von DraftJS funktioniert die obige Geige nicht - ich habe nicht den Ruf, mehr als eine Geige hier zu posten, aber versuche Mikhails Code mit v0.10 von DraftJS zu replizieren.

Um dies zu korrigieren, geben Sie 'handled' oder 'true' zurück, wenn der Editor die Eingabe nicht weiter verarbeiten soll.

Fiddle with corrected return values

Zum Beispiel

_handleBeforeInput =() => { 
    const currentContent = this.state.editorState.getCurrentContent(); 
    const currentContentLength = currentContent.getPlainText('').length 

    if (currentContentLength > MAX_LENGTH - 1) { 
    console.log('you can type max ten characters'); 
    return 'handled'; 
    } 
} 

die DraftJS docs auf Cancelable Handlers Siehe für mehr.

Answer 3

Lassen Sie uns für eine Sekunde darüber nachdenken. Wie lautet die Änderung? Ihre onChange, richtig? Gut. Wir kennen auch die length. Richtig? Wir attact die „Arbeiter“, das ist die onChange:

const length = editorState.getCurrentContent().getPlainText('').length; 

// Your onChange function: 
onChange(editorState) { 
const MAX_LENGTH = 10; 
const length = editorState.getCurrentContent().getPlainText('').length; 

if (length <= MAX_LENGTH) { 
    this.setState({ editorState }) // or this.setState({ editorState: editorState }) 
} 
} else { 
console.log(`Sorry, you've exceeded your limit of ${MAX_LENGTH}`) 
} 

Ich habe nicht versucht, aber mein sechster Sinn sagt es ganz gut funktioniert.