web-dev-qa-db-ja.com

ドラフトjsの最大長を制限する方法

ドラフトjsの最大文字数を制限するにはどうすればよいですか？

そのような状態の長さを取得できますが、コンポーネントの更新を停止するにはどうすればよいですか？

var length = editorState.getCurrentContent().getPlainText('').length;
javascriptreactjsdraftjs
10
Firanolfind

handleBeforeInput および handlePastedText 小道具を定義する必要があります。ハンドラー関数では、現在のコンテンツの長さ+貼り付けられたテキストの長さを確認し、最大値に達した場合は'handled'文字列を返す必要があります。

UPD 21.03.2018：react/react-dom（16.2.0）およびDraft.js（0.10.5）の最新バージョンにアップグレードされました。

実例- https://jsfiddle.net/Ln1hads9/11/

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 startBlock = currentContent.getBlockForKey(startKey);
      const isStartAndEndBlockAreTheSame = startKey === endKey;
      const startBlockTextLength = startBlock.getLength();
      const startSelectedTextLength = startBlockTextLength - currentSelection.getStartOffset();
      const endSelectedTextLength = currentSelection.getEndOffset();
      const keyAfterEnd = currentContent.getKeyAfter(endKey);
      console.log(currentSelection)
      if (isStartAndEndBlockAreTheSame) {
        length += currentSelection.getEndOffset() - currentSelection.getStartOffset();
      } else {
        let currentKey = startKey;

        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;
    const selectedTextLength = this._getLengthOfSelectedText();

    if (currentContentLength - selectedTextLength > 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'))
12
Mikhail Shabrikov

Mikhailのメソッドは正しいですが、ハンドラーの戻り値は正しくありません。 'not_handled'は、エディターコンポーネントが入力を正常に処理できるようにするフォールスルーケースです。この場合、エディターによる入力の処理を停止します。

古いバージョンのDraftJSでは、処理コードに「true」と評価された文字列が存在するように見えるため、上記のコードは正しく動作しました。 DraftJSの新しいバージョンでは、上記のフィドルは機能しません-ここに複数のFiddleを投稿するという評判はありませんが、DraftJSのv0.10を使用してMikhailのコードを複製してみてください。

これを修正するには、エディターに入力の処理を続行させたくない場合は、「handled」またはtrueを返します。

修正された戻り値をいじる

例えば、

_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のドキュメントを参照してください。

4
JSH

これについて少し考えてみましょう。変更を加えるために何が呼ばれますか？あなたの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}`)
}

私はこれを試していませんが、私の第6の感覚はそれがうまくいくと言っています。

0
Sylar