ドラフトjsエディタの空白をチェックする方法

Question

エディタで空白が空であることをどのようにチェックできますか？ エディタに空白がある場合は、フォームを送信したくありません。 私は編集者が空かないで検出し、この機能を使用していますが、それは検出されないと、エディタは、あなたが現在に呼び出すことができる二つの方法でエディタの内容を確認することができます

contentState.hasText() 

Answer 1

を空のスペースを持っているかではありませんコンテンツの状態。最初 - hasTextと第2 getPlainText

以下のデモを確認してください。ここでは、3つの異なるエディタ条件を確認してください。

• は、

• は、エディタがスペースのみ（および他の文字）を含んエディタの空（スペースなし、ノー手紙、他の文字）であるが、

• は、エディタはいくつかのテキスト（スペースを除く任意の文字）

const {Editor, EditorState} = Draft; 
 

 
class Container extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     editorState: EditorState.createEmpty() 
 
    }; 
 
    } 
 
    
 
    _handleChange = (editorState) => { 
 
    this.setState({ editorState }); 
 
    } 
 
    
 
    _checkEditorContent =() => { 
 
    const content = this.state.editorState.getCurrentContent(); 
 
    const isEditorEmpty = !content.hasText(); 
 
    const currentPlainText = content.getPlainText() 
 
    const lengthOfEditorContent = currentPlainText.length; 
 
    const lengthOfTrimmedContent = currentPlainText.trim().length; 
 
    const isContainOnlySpaces = !isEditorEmpty && !lengthOfTrimmedContent; 
 

 
    console.clear(); 
 
    console.log('editor empty => ', isEditorEmpty) 
 
    console.log('editor containe only spaces => ', isContainOnlySpaces) 
 
    console.log('editor containe some text (not only spaces) => ', !!(!isEditorEmpty && lengthOfTrimmedContent)) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div className="container-root"> 
 
     <Editor 
 
      placeholder="Type away :)" 
 
      editorState={this.state.editorState} 
 
      onChange={this._handleChange} 
 
     /> 
 
     <button onClick={this._checkEditorContent}> 
 
      CHECK 
 
     </button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

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

body { 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
.public-DraftEditor-content { 
 
    border: 1px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.0/Draft.js"></script> 
 
<div id="react-root"></div>

が含まれています