が反応JS

Question

でハンドラ関数を繰り返していない私は現在のモジュールの数に次のコードを持っている：

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

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

私は自分自身を繰り返しておりませんように私のコードを統合しようとしています。私はもともとこのファイルをFormHandler.jsという別のファイルに移動し、このコードをFormHandlerというクラスに配置しようとしていました。次のように私は、ハンドラをインポートします：

Import FormHandler from '.\FormHandler 

を私はこのようにそれを使用することができるだろうと思う：

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

私は周りに私の心を取得しようとしています主な問題はです状態を設定する。現在、FormHandlerクラスは、呼び出すコンポーネントではなくFormHandlerクラスに状態を設定しようとします。

ので、二つの質問：

1. が、私は自分自身を繰り返しておりませんように、独自のモジュールにこのコードを分離しようとすると気にする必要がありますか？結局のところ、importコマンド自体は一種の繰り返しです。
2. もしそうなら、呼び出し元のコンポーネントの状態を更新するにはどうすればいいですか？私が思いつくことができるのは、繰り返しを繰り返すことだけです。

Answer 1

考えられる考え方は、コンポーネントで定義されている状態ハンドラ関数を汎用の変更ハンドラに渡すことです。

この状態ハンドラは、すべてのロジックが完了した後、valueとidを引数として呼び出されます。

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

でレンダリング、handleChange関数は、それ自体が最終的stateHandlerを呼び出す関数を返す、実行されますonChangeイベントが入力に対してトリガされます。

Answer 2

状態管理のために、あなた自身で何かを構築するのではなく、reduxとredux-formのlibsを調べることを強くお勧めします。それらは、アプリケーションの状態管理のためにいわゆるstoreを設定するためのいくつかの非常に柔軟な方法を提供します。このように、状態は、たとえば、あなたの場合のように、内部コンポーネントの実装に依存しません。

あなたのコードの複製に関する質問に答えるには、解決策があるとわかるのは、FormHandlerまたはFormEventHandlerです（後者はもっと明示的に聞こえますが、それは主観的です）。クラスは別のクラスから継承されていますクラス。

その後、あなたはFormHandlerのhandleChange方法を必要とするすべてのコンポーネントで、あなたは同様に、共有メソッドにアクセスするためにextendであなたのコンポーネントのクラスに実装することができます。個人的に

class InputArray extends FromEventHandler { } 

、私はまだ明示的な使用を好みますFormHandlerです。これは、クラスの継承の代わりに追跡する方が簡単なためです。長期的には、あるクラスが他の複数のクラスから継承を開始すると、何が含まれているのかを追跡するのが混乱し始めます。もちろん、FormHandlerとEventDistributorにはhandleChangeのような同じメソッドを持つことができるので、両方のクラスから継承すると、インポート方法をhandleChangeの代わりに使うと興味深い結果が得られるかもしれません。 （EventDistributor.handleChangeなど）