如何重构所有子功能只做一个？

Question

我是 React.js 的初学者。尝试优化我的代码（reactjs 上的一个简单计算器）。我有很多子函数来处理一些操作，比如添加新数字，或者选择操作（+，-）等等。如何重构它们，让一个函数在一个地方处理所有操作？

代码来自 App.js

export default class App extends Component {
    state = {
        value: [],
        setValue: '',
        operation: ''
}

handleAddNumber = (nbr) => {
    // console.log( 'val: ' + nbr)
    const val = this.state.value
    if (val.length === 10){
        return console.log('Max size!')
    } else if (this.state.value === '0' ) {
        this.setState({
            value: nbr
        })
    } else {
        this.setState({
            value: this.state.value + nbr
        })
    }
    // console.log( 'State: ' + this.state.value)
}

handleOperation = (val) => {
    this.setState({
        setValue: this.state.value,
        value: [],
        operation: val
    })
}

handleEqual = () => {
    let sum;
    let operation = this.state.operation;
    let number1 = parseFloat(this.state.value);
    let number2 = parseFloat(this.state.setValue);

    if (operation === '+') {
        sum = number2 + number1;
    } else if (operation === '-') {
        sum = number2 - number1;
    } else if (operation === '*'){
        sum = number2 * number1;
    } else if (operation === '/') {
        sum = number2 / number1;
    } else if (operation === '%') {
        sum = number1 / 100;
    } else if (typeof sum === "undefined") {
        return
    }

    // const val = sum.toString();

    if (sum.toString().length >= 9) {
        this.setState({
            value: sum.toPrecision(8).toString()
        })
    } else {
        this.setState({
            value: sum.toString()
        })
    }
}

handlePercent = () => {
    let number1 = parseFloat(this.state.value);
    this.setState({
        value: number1 / 100
    })
}

handleSign = () => {
    let number = parseFloat(this.state.value);
    let sum = number * (-1);
    this.setState({
        value: sum
    })
}

addNbrDot = () => {
    const nbr = this.state.value
    const str = nbr.toString();
    const hasDot = str.includes('.', 0);
    if (str.length === 0) {
        this.setState({
            value: 0 + '.'
        })
    } else if (hasDot) {
        console.log('double dots')
    } else {
        this.setState({
            value: this.state.value + '.'
        })
    }
}

handleAC = () => {
    this.setState({
        value: '0'
    })
}

render() {
    return (
    <div className="App">
        <div className="App-box">
            <header className="App-header">
                <h1>Calculator</h1>
            </header>
            <main>
                <Display value = { this.state.value }/>
                <Buttons handleAC = { this.handleAC }
                         handleSign = { this.handleSign }
                         handlePercent = { this.handlePercent }
                         handleEqual = { this.handleEqual }
                         handleOperation = { this.handleOperation }
                         addNumberDot={this.addNbrDot}
                         handleAddNumber = { this.handleAddNumber } />
            </main>
        </div>
    </div>
    );
}

您可以在 github 上找到的所有源代码：https://github.com/dauren2089/react-calculator.git

我愿意接受任何批评和建议。

Answer 1

一种简单的方法是创建一个新函数，将所有其他函数包装在其中。新函数接受一个参数（可能是字符串），它定义了您希望执行的操作类型（例如“add”、“equal”等）。然后使用 javascript switch/case statement 触发要使用的函数和 return 结果。

让我用您的代码举例说明..

handleOperation = (operation, nbr) => {
  switch(operation) {
    case 'add':
      // console.log( 'val: ' + nbr)
      const val = this.state.value
      if (val.length === 10){
          return console.log('Max size!')
      } else if (this.state.value === '0' ) {
          this.setState({
              value: nbr
            })
      } else {
          this.setState({
              value: this.state.value + nbr
          })
      }
      // console.log( 'State: ' + this.state.value)
      return val;
    break;
    case "equal":
      // insert whatever you want here
    break;
    default:
      // whatever you want to do if no operations match
      console.log("handleOperation: Incorrect operation - ", operation);
  }
}

然后您可以使用您想到的数字和操作来调用该函数..

handleOperation("add",32);

如何重构所有子功能只做一个？

How to refactor all subfunction to make only one?

optimization

calculator

reactjs