Question

我为React练习制作了一个计算器应用程序，我想知道是否可以重构此事件或将其移至另一个模块，以使代码更有条理。

由于该事件已连接到this.setState，所以我无法想到将其移动到另一个文件的方法。

是不是此时我必须使用Redux之类的东西，以便我可以更轻松地组织活动？

onClickFunc(e){
    if(e.target.className === "number"){
        //Keep choosing firstValue if operator not set
        if(this.state.operator === null){
            this.setState({firstValue: e.target.value});
        }
        else{//If operator is set, add the second number
            this.setState({lastValue: e.target.value});
        }

    }
    else{
        //Can only think of a switch statement //e.target.innerHTML could have worked as well
        let call = this.state;
        switch(e.target.value){ 
            case '+':
                this.setState({
                    operator: function(x,y){return parseFloat(x)+parseFloat(y)}
                });
                break;
            case '-':
                this.setState({
                    operator: function(x,y){return parseFloat(x)-parseFloat(y)}
                });
                break;
            case 'X':
                this.setState({
                    operator: function(x,y){return parseFloat(x)*parseFloat(y)}
                });
                break;
            case '/':
                this.setState({
                    operator: function(x,y){return parseFloat(x)/parseFloat(y)}
                });
                break;
            case 'x^2':
                this.setState((value)=>{
                    return {firstValue: Math.pow(parseFloat(value.firstValue),2)}
                });
                break;
            case 'C':
                this.setState({firstValue:0,lastValue:0,operator:null});
                break;
            case '+-':
            //Make first number neg
                if(this.state.operator === null){
                    this.setState((value)=>{
                        return {firstValue: (-parseFloat(value.firstValue)) }
                    });
                }
                else{//Make last number neg
                    this.setState((value)=>{
                        return {lastValue: (-parseFloat(value.lastValue)) }
                    });
                }
                break;
            case '=':
                if(call.operator !== null){
                    let total = call.operator(call.firstValue,call.lastValue);
                    this.setState({firstValue: total});
                }
                break;
            default:
                this.setState({operator: null});
                console.log("failure");
        }
    }

}

Answer 1

是的，只要您的代码有权访问应使用的引用，就可以移动它。您可以将代码放入另一个文件中，并通过传递事件和类引用的函数对其进行包装。像这样：

export const myFunction = (e, cls) => {
  let call = cls.state;
  switch(e.target.value){
    case '+':
      cls.setState({
        operator: function(x,y){return parseFloat(x)+parseFloat(y)}
      });
      break;
    .....
  }
}

然后将函数导入到您的原始文件中

import { myFunction } from './path-to-file'

以及类方法中的in：

onClickFunc(e) {
  myFunction(e, this)
}

Answer 2

this.setState用于管理当前组件的状态。因此，最好保持原样。

相反，您可以将每个运算符处理程序提取到单独的文件中（或提取到一个文件中，具体取决于您的要求和时间）。

handleNumbers = number => {
  this.state.operator === null
    ? this.setState({firstValue: number})
    : this.setState({lastValue: number});
}

handleOperators = operator => {
  this.setState({operator: operationMap(opreator)});
}

operatorHandlers = operator => handler => 

onClickFunc(e){
  e.target.className === "number"
    ? this.handleNumbers(e.target.value);
    : this.handleOperators(e.target.value);
}

您可以将操作实现移入方法中，并将其移至不同文件并导出。

// You can move these to another file(s) and export each method.
const addHandler = (state, props) => (x, y) => parseFloat(x) + parseFloat(y);
const subtractionHandler = (state, props) => (x, y) => parseFloat(x) - parseFloat(y);
const multiplicationHandler = (state, props) => (x, y) => parseFloat(x) * parseFloat(y);
const operationMap = {
  "+": addHandler,
  "-": subtractionHandler,
  "X": multiplicationHandler
};

如果您查看这些*Handler方法，它们将采用(state, props)。
目的是能够将运算符逻辑移出组件文件之外。

如果您想知道为什么，请查看Dan Abramov（React的核心开发人员）的twit。
他解释得最好。

您可以通过更多的重构来发疯，但是在有意义的时候这样做。
（我可以考虑使用策略模式通过高阶组件等注入策略（* Handler方法）... ）

有没有办法将React事件移动到另一个文件然后导入它？

2 个答案: