La version 15 de React est obsolète valueLink qui était une propriété sur les éléments de formulaire pour exprimer une liaison bidirectionnelle entre la valeur de l'élément de formulaire et une propriété d'état du composant utilisant l'élément. Le remplacement recommandé consiste à spécifier explicitement le value comme accessoire et pour fournir un onChange gestionnaire à la place.
Chez Rescale, nous utilisons valueLink beaucoup. Lors de la création de composants pour modifier des objets métier, nos objets métier sont généralement immuables Record instances de la bibliothèque Immutable : nous utilisons le modèle consistant à transmettre l'objet métier au composant via props, puis initialiser une propriété d'état sur le composant audit objet via getInitialState. Voici le pseudocode à titre d'illustration :

// Notre objet métier immuable const company = new Company({ budget : '1000', name : 'Cool Company', }); // L'UI de modification de l'entreprise // La définition du composant const LinkedStateMixin = require('react-addons-linked-state-mixin'); const CompanySettings = React.createClass({ mixins : [ LinkedStateMixin, ], getInitialState() { société : this.props.company, showAdvancedOptions : false, }, handleNameChange(name) { this.setState({ société : this.state.company .set('nom', nom); }); }, handleBudgetChange(budget) { this.setState({ société: this.state.company.set('budget', budget); } }); { // Enregistrer la logique }, render() { return (

); }, });
Ce qui est bien avec ce modèle, c'est que puisque nos objets métier sont immuables, l'entreprise est passée dans le composant (this.props.company) sera garanti de ne pas changer au cours de la modification de la société au sein de ce composant, mais la société référencée par state (this.state.company) peut changer lorsque handleNameChange est appelé. Avec ce modèle, l'état du composant peut être considéré comme une zone de « préparation » pour les modifications apportées au modèle. On peut faire des trucs comme comparer l'entreprise référencée par state avec la société référencée par props pour déterminer si des modifications ont été apportées, et nous pouvons facilement annuler les modifications ou les abandonner.
Comme vous pouvez le constater, cela devient un peu fastidieux de créer des gestionnaires pour chaque champ du modèle pouvant être modifié par le formulaire. Dans notre exemple, nous avions besoin de gestionnaires pour les modifications apportées à name et des changements à budget. Mais il n'est pas trop difficile de créer une fonction qui générera un objet avec un { requestChange, value } associez-le puis nourrissez cet objet à valueLink. En effet c'est ce que réagir-addons-linked-state-mixin et réagirlink-immuable est utilisé pour.
Cependant, dans React 15, nous devons utiliser value et onChange au lieu de valueLink. Passer à l'utilisation value ce n'est pas si grave, nous l'écrivons simplement comme dans l'exemple ci-dessus. La seule mise en garde est que pour les cases à cocher, nous devons utiliser checked au lieu de value.
Création d'une usine qui génère des gestionnaires pour onChange est quelque chose que nous avons décidé de mettre en œuvre nous-mêmes puisque nous utilisons un mélange d'états de composants simples (états avec une simple chaîne ou des valeurs booléennes) et d'états faisant référence à des objets immuables. Voici une telle usine pour générer onChange gestionnaires (nommés linkState, à ne pas confondre avec le this.linkState donné par réagir-addons-linked-state-mixin):

function createHandler (composant, clé, chemin) { return e => { const el = e.target; valeur const = el.type === 'case à cocher' ? el.checked : el.valeur; composant.setState({ [clé] : chemin ? composant.état[clé].setIn(chemin, valeur) : valeur, }); } ; } module.exports = function linkState(composant, clé, chemin) { if (chemin) { return createHandler(composant, clé, chemin); } const cache = composant.__linkStateHandlers || (composant.__linkStateHandlers = {}); retourner le cache[clé] || (cache[clé] = createHandler(composant, clé)); } ;

Nous pouvons l'utiliser pour remplacer le valueLinks dans l'exemple ci-dessus :

const CompanySettings = React.createClass({ getInitialState() { company: this.props.company, showAdvancedOptions: false, }, save() { // Poignée de sauvegarde }, render() { return (

); }, });
Ce qui est bien avec notre implémentation, c'est que nous n'avons pas besoin d'utiliser des mixins qui pourraient être obsolètes à l'avenir, et nous utilisons la même fonction d'usine pour créer des gestionnaires qui gèrent des états simples ainsi que pour des modifications profondes d'objets immuables. Cela signifie que nous pouvons supprimer les dépendances réagir-addons-linked-state-mixin et réagirlink-immuable dans nos projets.