可以/应该状态包含其值为函数的属性

Question

我试图在React中建立一个计算器。所以我创建了组件： 1.计算器 2.键盘 3.按钮 4.显示

对于（+，-，x，/）之类的操作符号，我正在将一个函数发送到Calculator App，并将其保存在状态对象中。请忽略计算/代码背后的逻辑，我只是​​一个初学者，我知道我有很多事情要清理。 我的主要问题，这是我将每个符号的功能发送到操作属性的状态和设置的方式。 这是一个好习惯吗？

Button.js

function Button(props){
    return(
        <input type="button" className="btn m-2 " value={props.value} onClick={()=>(props.onClick(props.value, props.calculate))} />
    )
}

Keypad.js

function KeyPad(props) {

    function renderButton(value, Calculate) {
        return (<Button value={value} calculate={Calculate} onClick={props.onClick} />)
    }
    return (
        <div className="KeyPad container">
            <div className="row">
                <div className="col-md-4">
                    {renderButton("1")}
                    {renderButton("2")}
                    {renderButton("3")}
                    {renderButton("/", function Divide(a, b, callback) { callback(Number(a) / Number(b));})}
                </div>
            </div>

            <div className="row">
                <div className="col-md-4">
                    {renderButton("4")}
                    {renderButton("5")}
                    {renderButton("6")}
                    {renderButton("x", function Multiply(a, b, callback) { callback(Number(a) * Number(b));})}
                </div>
            </div>

            <div className="row">
                <div className="col-md-4">
                    {renderButton("7")}
                    {renderButton("8")}
                    {renderButton("9")}
                    {renderButton("-", function Subtract(a, b, callback) { callback(Number(a) - Number(b));})}
                </div>
            </div>

            <div className="row">
                <div className="col-md-4">
                    {renderButton(" ")}
                    {renderButton(" ")}
                    {renderButton("=")}
                    {renderButton("+", function Add(a, b, callback) {callback(Number(a) + Number(b));})}
                </div>
            </div>
        </div>
    )
}

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      operand1: "",
      operation: null,
      operand2: "",
      currentValue: ""
    }
  }

  handleClick(input, Calculate) {
    var operand1 = this.state.operand1;
    var operand2 = this.state.operand2;

    //alert(typeof (Calculate));
    if (typeof (Calculate) === 'function') {
      var func;
      if (this.state.operation === null) {
        func = Calculate;
      } else {
        func = this.state.operation;
      }
      this.setState({ operation: Calculate });
      if (operand1 !== "" && operand2 !== "") {
        func(operand1, operand2, (result) => { this.setState({ operand1: result, currentValue: result, operand2: "" }); })
      } else if (operand2 !== "") {
        func(0, operand1, (result) => { this.setState({ operand1: result, currentValue: result, operand2: "" }); })
      }
    } else {
      //it's input feed:
      if (typeof (this.state.operation) !== "function") {
        var value = String(this.state.operand1) + String(input);
        this.setState({ operand1: value, currentValue: value })
      }
      else {
        //we know first operand already holds the value;
        var value = String(this.state.operand2) + String(input);
        this.setState({ operand2: value, currentValue: value })
      }
    }
  }

  render() {
    return (
      <div className="App">
        <Display value={this.state.currentValue} />
        <KeyPad onClick={(a, b) => this.handleClick(a, b)} />
      </div>
    );
  }
}