メソッドとしての関数の外部への使用

Question

いくつかのコンポーネントで使用する必要がある関数をいくつか用意しています。

export default class FormFunctions { 
    handleChange (event) { 
    const changedOne = event.target.name 
    const newValue = event.target.value 
    const newState = {} 
    newState[changedOne] = newValue 
    this.setState(newState) 
    } 
    handleSubmit (infoToPass, toThisMethod) { 
    Meteor.call(toThisMethod, infoToPass, function() { 
     console.log('userCreate call callback') 
    }) 
    } 
} 

コンポーネントのメソッドとしてどのように使用できますか？

このように試しましたが動作しません。そして、クラスが必要なのかどうかはよく分かりません。

import React, { Component } from 'react' 
import Register from './Register.jsx' 
import FormFunctions from './FormFunctions' 

class RegisterLogic extends Component { 

    render() { 
    return <Register 
     handleChange={this.handleChange} 
     handleSubmit={this.handleSubmit} 
     /> 
    } 
} 

export default RegisterLogic 

Answer 1

あなたはあなたのコードには2つの小さな変更を加えることによって、この作業を行うことができます。

1. 代わりthis.handleChangeの、あなたがFormFunctions.handleChangeを使用する必要があります。クラスから関数を参照できるようにするには、その定義にstaticを追加するか、static handleChange (event) {を追加するか、クラスのオブジェクトを作成して使用します。

2. 何らかの理由で.bind(this)と呼んで、反応する成分が何かのために使用するように指示すると、あなたのコードはhandleChange={FormFunctions.handleChange.bind(this)}になります。

希望します。

Answer 2

上位のコンポーネントに機能を追加して渡すことはできますか？ロジックが複数で同じになる場合は、基本的にはlift the state upです。

utilファイルの関数としてそれらを抽出してクラスにバインドする方法がありますが、これをお勧めしません。代わりにReduxのような状態管理ファイルを使用する方がはるかに優れています。サイズ、その他の大きなメリット）。

Reduxのような状態管理システムを使用している場合は、setStateの機能をレデューサー（通常の機能のみ）にすることができます。この減速器から他の減速機を呼び出すことができ、この論理はあなたが望むすべての構成部品に利用できるようになります。