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

您可以将这些功能放在更高的组件中并将其传递下去吗？基本上lift the state up如果逻辑在多个中相同。

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

如果您使用像Redux这样的状态管理系统，那么您可以将setState功能作为reducer（只是一个普通函数）。然后，您可以从此减速器调用其他减速器，并且此逻辑可用于您希望的所有组件。

Answer 2

您可以通过对代码进行两处小的更改来完成此工作：

您必须使用FormFunctions.handleChange，而不是this.handleChange。为了能够从类中引用该函数，您可以在其定义中添加static：static handleChange (event) {或创建并使用该类的对象。
无论出于何种原因，您都会调用.bind(this)告诉反应组件使用哪些功能，因此您的代码变为handleChange={FormFunctions.handleChange.bind(this)}。

希望这有帮助。

在函数外部反应使用作为方法

2 个答案: