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

能不能把函数放到更高的组件里传下去？基本上 lift the state up 如果多个逻辑相同。

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

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

Answer 2

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

而不是 this.handleChange，您将不得不使用 FormFunctions.handleChange。为了能够引用 class 中的函数，您可以在其定义中添加静态：static handleChange (event) { 或创建并使用 class.
[=25 的对象=]
无论出于何种原因，您调用 .bind(this) 来告诉 React 组件使用哪个函数，因此您的代码变为 handleChange={FormFunctions.handleChange.bind(this)} .

希望对您有所帮助。

React 使用外部函数作为方法

React use outside functions as methods

javascript

ecmascript-6

reactjs

es6-modules