如何限制JS草案

Question

的最大長度如何限制在JS草案最大字符？

我能得到這樣的狀態的長度，但如何停止更新組件？

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

Answer 1

您應該定義handleBeforeInput和handlePastedText道具。在處理函數中，檢查當前內容的長度+粘貼文本的長度，如果達到最大值，則應返回'handled'字符串。

工作的例子 - 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

米哈伊爾的方法是正確的，但處理程序返回的值是沒有的。 'not_handled'是一個讓編輯器組件正常處理輸入的情況。在這種情況下，我們希望停止編輯器處理輸入。

在舊版本的DraftJS，它看起來像一個串中的處理代碼評估爲「真」的存在，並且因此上述代碼表現正常。在DraftJS更高版本，上面的小提琴不工作 - 我沒有信譽張貼在這裏更多的是一個小提琴，但儘量米哈伊爾的代碼DraftJS的v0.10複製。

要糾正這一點，回報「處理」或真當你不想要的編輯器來繼續處理輸入。

Fiddle with corrected return values

例如，

_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'; 
    } 
} 

參見可取消處理程序的DraftJS文檔的更多。

Answer 3

讓我們想想這個一秒鐘。什麼被稱爲做出改變？你的onChange，對嗎？好。我們也知道length。正確？我們能吸引有在「工人」，這是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}`) 
} 

我還沒有試過，但我的第六感說，它工作得很好。