反応-codemirror beforeChangeイベント

Question

次のように私はreact-codemirrorノードモジュールを使用しています：

<CodeMirror 
    className={className} 
    value={this.state.code} 
    onBeforeChange={this.onBeforeChange} 
    onChange={this.onChange} 
    options={options} 
/> 

changeイベントが正常に動作しますが、私はbeforeChangeイベントにフックアップに見えることはできません。誰でも私が間違っていることを知っていますか？

次のように私は私のクラスでハンドラを宣言した：

onBeforeChange(change) { 
    console.log('calling beforeChange'); 
} 

onChange(newCode) { 
    this.setState({ 
    code: newCode 
    }); 
} 

Answer 1

著者。私はあなたの質問に遭遇し、3.xにいくつかの急激な変化があるので、詳細な答えをフォローアップしたいと思った。このコンポーネントには、異なるユースケースに基づいてUnControlledとControlledのバリアントが同梱されています。 onBeforeChangeコールバック内でsetStateと呼んでいることがわかります。あなたのケースでは、私は制御の変形例では、このような...

import {Controlled as CodeMirror} from 'react-codemirror2' 

<CodeMirror 
    value={this.state.value} 
    options={options} 
    onBeforeChange={(editor, data, value) => { 
    this.setState({value}); // must be managed here 
    }} 
    onChange={(editor, metadata, value) => { 
    // final value, no need to setState here 
    }} 
/> 

として制御コンポーネントを活用することをお勧めしたい、状態を管理することは任意の変更を確認するためにvalue小道具にを必要とされます。

また、UnControlled成分も同様にonBeforeChangeコールバックを有し、まだonBeforeChangeが指定されている場合nextが呼び出されるまでのような異なる動作と...ここ

import {UnControlled as CodeMirror} from 'react-codemirror2' 

<CodeMirror 
    value={value} 
    options={options} 
    onBeforeChange={(editor, data, value, next) => { 
    // hook to do whatever 
    next(); 
    }} 
    onChange={(editor, metadata, value) => { 
    }} 
/> 

しかしながら、onChangeを延期します。そうでない場合は、onChangeが発生します。ただし、UnControlledの亜種を使用すると、エディタは常に入力の変更に反応します。onChangeが呼び出された場合とそうでない場合の違いは簡単です。

これらの変更はコミュニティのニーズから派生したものです。期待どおりに動作しないものがあれば、open an issueにご連絡ください。

Answer 2

反応-codemirrorはbeforeChangeイベントを公開しませんが判明しました。

ただし、react-codemirror2となります。ライブラリのスイッチが私のためにこれを修正！

私の最後のコールバックコード：ここreact-codemirror2の

onBeforeChange(cm, change, callOnChange) { 

    const options = Object.assign({}, DEFAULT_OPTIONS, this.props.options) 

    if (options.singleLine) { 
    var after = change.text.join('').replace(/\n/g, '') 
    change.update(change.from, change.to, [after]) 
    } 

    callOnChange() 
} 

onChange(cm, change, code) { 

    this.setState({ code }) 

    if (this.props.onChange) { 
    this.props.onChange(code) 
    } 
}