React 使用外部函数作为方法

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. 您必须使用 FormFunctions.handleChange 而不是 this.handleChange。为了能够从类中引用函数，您可以在其定义中添加静态：static handleChange (event) { 或创建并使用类的对象。

1234563

希望这会有所帮助。

Answer 2

你能把函数放在更高的组件中并向下传递吗？基本上lift the state up如果逻辑将在多个相同。

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

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