Javascript 使用外部函数作为方法

我有一些函数需要在几个组件中使用，所以我将它们放在这样的模块中

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

import React，{Component}来自“React”
从“./Register.jsx”导入寄存器
从“/FormFunctions”导入FormFunctions
类RegisterLogic扩展组件{
渲染（）{
返回
}
}
导出默认注册表逻辑

能否将函数放在较高的组件中并向下传递？基本上，如果逻辑在多个方面是相同的

有一种方法可以将它们提取为util文件中的函数，然后将它们绑定到类中，但我不建议这样做，我发现使用诸如Redux之类的状态管理文件要好得多（文件大小很小，还有其他巨大的好处）

---

如果使用Redux之类的状态管理系统，则可以将

setState

功能用作减速机（只是一个正常功能）。然后，您可以从该减速机调用其他减速机，并且该逻辑将可用于您希望的所有组件。

您可以通过对代码进行两个小更改来实现这一点：

您必须使用

FormFunctions.handleChange

，而不是this.handleChange。为了能够从类中引用函数，可以将static添加到其定义中：

static handleChange（event）{

或创建并使用类的对象

无论出于何种原因，您都可以调用

.bind（this）

来告诉react组件要为某个对象使用哪个函数，因此您的代码变成

handleChange={FormFunctions.handleChange.bind（this）}

---

希望这能有所帮助。

1.不会起作用，因为你不能在静态中访问

这个

。这就是为什么它们是静态的。我还没有学过Redux，但是提升状态似乎是一个可靠的官方解决方案，但我不确定如何使用React-Router，也许你可以提供一个例子？@HaykSafaryan我以前没有使用过React-Router在没有官方解决方案的情况下，React路由器似乎存在很多问题。