不重复处理函数阵营JS

我目前在多个模块的下面的代码：不重复处理函数阵营JS

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命令本身就是一种重复。
如果是这样，我该如何去更新调用组件的状态。看起来我能想出的任何东西只是引起更多的重复。

来源

2017-07-29 kojow7

一个潜在的想法可能是将组件中定义的状态处理函数传递到通用更改处理程序中。

此状态处理程序将在所有逻辑完成后调用，其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功能将被执行，返回本身最终将调用stateHandler一种功能，当在输入上触发onChange事件。

来源

2017-07-29 16:40:54 Richard

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

至于回答您的代码重复的问题，一个办法，我会看到一个解决方案，它是有一个FormHandler或FormEventHandler（后者的声音对我来说更好，因为它更明确，但这是主观）班正在从另一个继承类。

然后，在你需要FormHandler的handleChange方法的任何组件，可以实现到组件的类extend访问共享的方法，如：

class InputArray extends FromEventHandler { }

就个人而言，我还是更喜欢明确的使用的FormHandler，因为它更容易追踪而不是类继承。从长远来看，当一个课程开始从多个其他课程继承时，它开始令人困惑，以追查哪些课程包含什么。更何况，总有一个机会，FormHandler和EventDistributor可以有相同的方法，如handleChange，所以从这两个类继承可能会引入一些有趣的结果，而不是使用他们的导入方式handleChange。（EventDistributor.handleChange等）

来源

2017-07-29 16:42:15 Denialos

不重复处理函数阵营JS

回答

相关问题