Question

我目前在许多模块中都有以下代码：

handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const id = target.id;

    this.setState({
        [id]: value
    });
}

我正在尝试整合我的代码，以便我不会重复自己。我最初试图将此文件移动到另一个名为FormHandler.js的文件中，并将此代码放入一个名为FormHandler的类中。然后我会按如下方式导入处理程序：

Import FormHandler from '.\FormHandler

我想我能够像这样使用它：

<input id="first_name" onChange={FormHandler.handleChange.bind(this)} />

我想要解决的主要问题是设置状态。目前，它会尝试在FormHandler类中设置状态，而不是我从中调用它的组件。

所以，有两个问题：

我是否应该费心将这段代码分成自己的模块，这样我才不会重复自己？在所有import命令本身就是一种重复之后。
如果是这样，我该如何让它更新调用组件的状态。似乎我能想出的任何事情只会导致更多的重复。

Answer 1

一个可能的想法可能是将组件中定义的状态处理函数传递给泛型更改处理程序。

然后在完成所有逻辑后调用此状态处理程序，并以value和id作为参数。

<强> formHandler.js

export default function handleChange(stateHandler){

  return event => {

    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const id = target.id;

    stateHandler(id, value);
  };
}

<强> yourComponent.jsx

import React, { Component } from 'react';
import handleChange from './formHandler';

export default Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  stateHandler(id, value) {
    this.setState({
      [id]: value
    });
  }

  render() {
    return <input id="test-input" onChange={handleChange(this.stateHandler.bind(this))} />;
  }
}

在渲染时，将执行handleChange函数，它本身返回一个函数，当输入触发onChange事件时，该函数最终将调用stateHandler。

Answer 2

对于州管理，我强烈建议调查redux和redux-form库，而不是尝试构建自己的东西。它们提供了一些非常灵活的方法来为应用程序的状态管理设置所谓的store。这样，状态就不依赖于任何内部组件的实现，例如。

至于回答你的代码重复问题，我看到解决方案的一种方法是拥有FormHandler或FormEventHandler（后者听起来更好，因为它更明确，但那是主观的）类继承自另一个类。

然后，在您需要FormHandler的{{1}}方法的任何组件中，您可以使用handleChange在组件的类中实现访问共享方法，例如：

extend

就个人而言，我仍然更喜欢明确使用class InputArray extends FromEventHandler { }，因为它更容易跟踪而不是类继承。从长远来看，当一个类开始从多个其他类继承时，它开始混淆跟踪哪个包含什么。更不用说，FormHandler和FormHandler总是有可能拥有相同的方法，例如EventDistributor，所以继承这两个类可能会引入一些有趣的结果而不是使用它们的handleChange导入方式。（handleChange等）

在React JS中不重复处理函数

2 个答案: