réagir-CodeMirror l'événement beforeChange

Question

J'utilise le module de noeud react-codemirror comme suit:

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

L'événement change fonctionne très bien, mais je ne peux pas sembler brancher à l'événement beforeChange. Quelqu'un sait ce que je fais mal?

J'ai déclaré des gestionnaires dans ma classe comme suit:

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

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

Answer 1

Auteur de react-codemirror2 ici. Je suis tombé sur votre question et je voulais suivre avec une réponse détaillée car il y a quelques changements de rupture dans 3.x. Le composant est désormais livré avec une variante UnControlled et Controlled en fonction de différents cas d'utilisation. Je vois que vous appelez setState dans le rappel onBeforeChange. Dans votre cas, je vous suggère de tirer parti de la composante contrôlée en tant que telle ...

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 
    }} 
/> 

Avec la variante contrôlée, la gestion de l'Etat est nécessaire sur l'accessoire value pour voir les changements.

En outre, le composant UnControlled a également un rappel onBeforeChange aussi bien, mais avec un comportement différent en tant que tel ...

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) => { 
    }} 
/> 

Ici cependant, onChange sera différé jusqu'à ce que next est invoquée si onBeforeChange est spécifié. Sinon, onChange tirera indépendamment. Important à noter, cependant, avec la variante UnControlled, l'éditeur réagira toujours aux changements d'entrée - la différence sera simplement si onChange est appelée ou non.

Ces modifications ont été inspirées en raison des besoins de la communauté et je vous encourage à open an issue si quelque chose ne fonctionne pas comme prévu.

Answer 2

Il se trouve réagir-CodeMirror ne pas exposer l'événement beforeChange. Cependant, react-codemirror2 le fait. Un interrupteur de la bibliothèque a arrangé cela pour moi!

Mon code final de rappel:

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) 
    } 
}