不重複處理函數陣營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

回答

相關問題