Comment utiliser les helpers de field sans le form mixin avec le built-in-components ?

Ce tutoriel explique comment utiliser les fonctions de field dans votre application, sans utiliser le form-mixin (Il est parfois luxieux et inutile d'utiliser le form-mixin pour faire cela)...

Par exemple :

  • fieldFor pour afficher un champ qui se rend automatiquement en fonction des données de son domaine
  • selectFor pour afficher un champ de type liste déroulante
  • displayFor pour afficher un champ en mode consultation uniquement
  • textFor pour afficher le texte d'un champ uniquement
  • listFor pour afficher une liste
  • tableFor pour afficher un tableau
  • ...

Cette liste n'est pas exhaustive. Tous les helpers sont décrits ici

Comment procéder ?

Le code ci-dessous est un exemple d'utilisation. Attention, les données doivent être présentes dans le state du composant (pour cela, vous pouvez utiliseur un store-behaviour ou bien déclarer les données vous même dans le state du composant).

  1. Déclarez le built-in-components dans vos imports
  2. Entendez le comportement de votre composant à travers la directive mixins: [BuiltInComponents]
  3. Définissez la définition de votre composant (c'est important, sinon le mixin ne sera pas comment rendre automatiquement votre champ)
  4. Utilisez les helpers, par exemple ici fieldFor
//libraries
import React, {PropTypes} from 'react';

// web components
import Panel from 'focus-components/components/panel';
import builtInComponents from 'focus-components/common/mixin/built-in-components';

export default React.createClass({
    displayName: 'Test',
    mixins: [builtInComponents],
    definitionPath: 'movie',
    getInitialState() {
        return {
            name: 'Amélie'
        };
    },

    /** @inheritDoc */
    render() {
        return (
            <Panel title='test'>
                {this.fieldFor('name')}
            </Panel>
        );
    }
});

That's all !