时间戳

首页 > 解决方案 > ReactJs 切换案例

javascript - 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;

标签： javascriptreactjsreact-nativereact-redux

解决方案

我已经检查过并且工作正常，但如果您仍然遇到问题，我建议您使用parseFloat以确保收到的输入是正确的数字，因此请替换以下行

 var a = this.refs.a.value;
 var b = this.refs.b.value;

和

let a = parseFloat(this.refs.a.value);
let b = parseFloat(this.refs.b.value);

推荐阅读