répétition Non fonction de gestionnaire dans React JS

Question

J'ai actuellement le code suivant dans un certain nombre de modules:

handleChange(event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const id = target.id; 

    this.setState({ 
     [id]: value 
    }); 
} 

Je suis en train de consolider mon code pour que je ne suis pas me répéter. À l'origine, j'essayais de déplacer ce fichier vers un autre fichier appelé FormHandler.js et de placer ce code dans une classe appelée FormHandler. Je puis importer le gestionnaire comme suit:

Import FormHandler from '.\FormHandler 

Je pense que je serais alors en mesure de l'utiliser comme ceci:

<input id="first_name" onChange={FormHandler.handleChange.bind(this)} /> 

Le principal problème que je suis en train de faire mon esprit est autour de la régler l'état. Actuellement, il essaie de définir l'état dans la classe FormHandler plutôt que le composant dont je l'appelle.

Alors, deux questions:

1. Dois-je embêter avec essayer de séparer ce code dans son propre module afin que je ne suis pas me répéter? Après tout, la commande import est elle-même un type de répétition.
2. Si oui, comment l'obtenir pour mettre à jour l'état du composant appelant. Il semble que tout ce que je peux trouver ne fait que provoquer plus de répétitions.

Answer 1

Une idée potentielle pourrait être de passer une fonction de gestionnaire d'état telle que définie dans votre composant dans le gestionnaire de changement générique. Ce gestionnaire d'état serait alors appelé après que toute votre logique ait été complétée, avec vos arguments value et id comme arguments.

formHandler.js

export default function handleChange(stateHandler){ 

    return event => { 

    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const id = target.id; 

    stateHandler(id, value); 
    }; 
} 

yourComponent.jsx

import React, { Component } from 'react'; 
import handleChange from './formHandler'; 

export default Comp extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    } 

    stateHandler(id, value) { 
    this.setState({ 
     [id]: value 
    }); 
    } 

    render() { 
    return <input id="test-input" onChange={handleChange(this.stateHandler.bind(this))} />; 
    } 
} 

Le rendu, la fonction handleChange sera exécutée, se retournant une fonction qui sera finalement appeler le stateHandler lorsque le L'événement onChange est déclenché sur l'entrée.

Answer 2

Pour la gestion d'état, je conseille fortement de regarder dans redux et redux-form libs au lieu d'essayer de construire quelque chose de votre choix. Ils fournissent des moyens très flexibles pour mettre en place un soi-disant store pour la gestion de l'état de l'application. De cette façon, l'état ne dépend pas de l'implémentation d'un composant interne comme dans votre cas, par exemple.

Comme pour répondre à votre question de duplication de code, d'une façon que je verrions une solution à ce problème est d'avoir un FormHandler ou FormEventHandler (celui-ci sonne mieux pour moi car il est plus explicite, mais qui est subjectif) classe héritée d'une autre classe.

Ensuite, dans l'un des composants où vous avez besoin méthode de handleChangeFormHandler, vous pouvez mettre en œuvre dans la classe de votre composant avec extend pour accéder aux méthodes partagées, comme:

class InputArray extends FromEventHandler { } 

Personnellement, je préfère encore l'usage explicite de FormHandler car il est plus facile de suivre à la place de l'héritage de classe. À long terme, quand une classe commence à hériter de plusieurs autres classes, il commence à être déroutant de traquer qui contient quoi. Sans oublier, il y a toujours une chance que FormHandler et EventDistributor puissent avoir les mêmes méthodes comme handleChange, ainsi hériter des deux classes peut introduire des résultats intéressants au lieu d'utiliser leur handleChange la façon d'importer. (EventDistributor.handleChange, etc.)