Есть ли способ переместить события React в другой файл, а затем импортировать его?

Question

Я создал приложение-калькулятор для практики React, и мне было интересно, можно ли реорганизовать это событие или переместить его в другой модуль, чтобы код был более организованным.

Поскольку событие связано с этим.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

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).
Цель состоит в том, чтобы иметь возможность перемещать логику оператора за пределы файла компонента.

Если вам интересно, проверьте это twit от Дана Абрамова (основного разработчика React).
Он объяснил лучшее.

Вы можете сходить с ума с большим количеством рефакторингов, но делайте это, когда это имеет смысл.
(Я могу подумать об использовании шаблона стратегии для внедрения стратегий (* методы-обработчики) с использованием компонентов высокого порядка и т. Д. * )

Answer 2

Да, его можно перемещать, если у вашего кода есть доступ к ссылкам, с которыми он должен работать.Вы можете поместить свой код в другой файл и обернуть его функцией, которая передает ссылку на событие и класс.Например:

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'

И вход в ваш метод класса:

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