ReactJs 开关案例

迪利普·库马尔

第 8 行不工作意味着我的代码未执行附加操作其余所有操作均成功。任何人都可以向我解释更多关于${a+b}它的信息，因为它只是连接两个数字。

1    import React, { Component } from 'react'

2    class State6 extends Component {
3        state = { msg: '' }
4        calculate(op) {
5            var a = this.refs.a.value;
6            var b = this.refs.b.value;
7            switch (op) {
8                case 'add':
9                    this.setState({
10                        msg: `${a + b}`
                    });
                    break;
                case 'sub':
                    this.setState({ msg: a - b });
                    break;
                case 'mul':
                    this.setState({ msg: a * b });
                    break;
                case 'div':
                    this.setState({ msg: a / b });
                    break;
                default:
                    this.setState({ msg: "WRONG INPUT" })
            }
        }
        render() {
            return <div>
                <h2>Event Handing, Ex-08</h2>
                Enter no1:             <input type="number" ref="a" /> <br />
                Enter no2:             <input type="number" ref="b" /> <br />
                <input type="button" value="ADDITION" onClick={() => this.calculate('add')} />
                <input type="button" value="SUBTRACTION" onClick={() => this.calculate('sub')} />
                <input type="button" value="MULTIPLICATION" onClick={() => this.calculate('mul')} />
                <input type="button" value="DIVISION" onClick={() => this.calculate('div')} /> <hr />
                {this.state.msg}
            </div>
        }
    }
    export default State6;

钱德拉坎特

import React, { Component } from "react";

class State6 extends Component {
  state = { msg: "" };
  calculate(op) {
    var a = parseInt(this.refs.a.value || 0);
    var b = parseInt(this.refs.b.value || 0);
    switch (op) {
      case "add":
        this.setState({
          msg: `${a + b}`
        });
        break;
      case "sub":
        this.setState({ msg: a - b });
        break;
      case "mul":
        this.setState({ msg: a * b });
        break;
      case "div":
        this.setState({ msg: a / b });
        break;
      default:
        this.setState({ msg: "WRONG INPUT" });
    }
  }
  render() {
    return (
      <div>
        <h2>Event Handing, Ex-08</h2>
        Enter no1: <input type="number" ref="a" /> <br />
        Enter no2: <input type="number" ref="b" /> <br />
        <input
          type="button"
          value="ADDITION"
          onClick={() => this.calculate("add")}
        />
        <input
          type="button"
          value="SUBTRACTION"
          onClick={() => this.calculate("sub")}
        />
        <input
          type="button"
          value="MULTIPLICATION"
          onClick={() => this.calculate("mul")}
        />
        <input
          type="button"
          value="DIVISION"
          onClick={() => this.calculate("div")}
        />{" "}
        <hr />
        {this.state.msg}
      </div>
    );
  }
}
export default State6;

// 您正在用字符串添加字符串。在上述情况下，您必须将输入值转换为数字。在 ES6 中 '+' 不仅是 Plus 操作符，它还可以连接您的字符串。所以你需要添加转换为数字来执行加法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。