메소드를 함수로 외부에서 사용하기

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

당신은 당신의 코드에 두 개의 작은 변경하여이 작업을 할 수 있습니다 :

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 기능을 축소 기 (정상적인 기능)로 사용할 수 있습니다. 그런 다음이 감속기에서 다른 감속기를 호출 할 수 있으며이 논리는 원하는 모든 구성 요소에서 사용할 수 있습니다.