Question

我正在使用React构建一个税收计算器。目前，它仅包含两个功能。 handleInputChange用于在输入时在浏览器中实时呈现“ rate”和“ totalFees”值。一旦用户输入了“ rate”的值，handleSubmit就会进行计算。

constructor(props){
    super(props)
    this.state = {
        rate: 0,
        totalFees: 0,
        incomeTax: 0,
        nationalInsurance: 0,
        combined: 0,
        insideAnnual: 0,
        insideMonthly: 0
    }
}

handleInputChange = (event) => {
    event.preventDefault()
    this.setState({
        [event.target.name]: parseInt(event.target.value, 10)
    }, () => {
        this.setState({
            totalFees: parseInt(this.state.rate * 220, 10)
        })
    })
}

handleSubmit = (event) => {
    event.preventDefault()

    const rate = parseInt(event.target.value, 10);
    const totalFees = parseInt(rate * 220, 10);
    let incomeTax = 0;
    let nationalInsurance = 0;

    if (totalFees <= 8632) {
        incomeTax = 0;
        nationalInsurance = 0;
    } else if (totalFees <= 12500) {
        incomeTax = 0;
        nationalInsurance = ((totalFees - 8632) * .12);
    } else if (totalFees <= 50000) {
        incomeTax = ((totalFees - 12500) * .2);
        nationalInsurance = ((totalFees - 8632) * .12);
    } else if (totalFees <= 150000) {
        incomeTax = (7500 + ((totalFees - 50000) * .4));
        nationalInsurance = (4964.16 + ((totalFees - 50000) * .02));
    } else {
        incomeTax = (47500 + ((this.state.totalFees - 150000) * .45));
        nationalInsurance = (4964.16 + ((this.state.totalFees - 50000) * .02));
    }

    const combined = incomeTax + nationalInsurance;
    const insideAnnual = parseInt(totalFees, 10) - parseInt(combined, 10);
    const insideMonthly = Math.round((insideAnnual / 12) * 100) / 100;

    this.setState({
        rate: rate,
        totalFees: totalFees,
        incomeTax: incomeTax,
        nationalInsurance: nationalInsurance,
        combined: combined,
        insideAnnual: insideAnnual,
        insideMonthly: insideMonthly
    });
}

我的问题是，一旦提交表单，“ totalFees”和“ rate”的值将变为NaN。奇怪的是，“收入税”，“国家保险”和“合并”工作的计算（意味着它们是基于“费率”的原始输入以及最终的“总费用”值），而其他变量值却返回了NaN。有人可以解释为什么有问题的变量在提交表单时返回NaN，我可以做些什么来防止这种情况？谢谢。

Answer 1

不要在任何地方都使用parseInt，当它已经是int时，您就不需要解析它：

尝试更改：

handleInputChange = (event:any) => {
        event.preventDefault()
        this.setState({
            [event.target.name]: parseInt(event.target.value, 10)
        }, () => {
            this.setState({
                //changed here
                totalFees: this.state.rate * 220
            })
        })
    }
    handleSubmit = (event:any) => {
        event.preventDefault()

        const rate = parseInt(event.target.value, 10);
        //changed here
        const totalFees = rate * 220
        let incomeTax = 0;
        let nationalInsurance = 0;

        if (totalFees <= 8632) {
            incomeTax = 0;
            nationalInsurance = 0;
        } else if (totalFees <= 12500) {
            incomeTax = 0;
            nationalInsurance = ((totalFees - 8632) * .12);
        } else if (totalFees <= 50000) {
            incomeTax = ((totalFees - 12500) * .2);
            nationalInsurance = ((totalFees - 8632) * .12);
        } else if (totalFees <= 150000) {
            incomeTax = (7500 + ((totalFees - 50000) * .4));
            nationalInsurance = (4964.16 + ((totalFees - 50000) * .02));
        } else {
            incomeTax = (47500 + ((this.state.totalFees - 150000) * .45));
            nationalInsurance = (4964.16 + ((this.state.totalFees - 50000) * .02));
        }

        const combined = incomeTax + nationalInsurance;
        //changed here
        const insideAnnual = totalFees - combined
        const insideMonthly = Math.round((insideAnnual / 12) * 100) / 100;

        this.setState({
            rate: rate,
            totalFees: totalFees,
            incomeTax: incomeTax,
            nationalInsurance: nationalInsurance,
            combined: combined,
            insideAnnual: insideAnnual,
            insideMonthly: insideMonthly
        });
    }

Answer 2

您应该使用prop-types来控制变量的数据类型。例如：文件名：Persons.js

第1步：

导入库：

import { PropTypes } from 'prop-types';

第2步：


class Person extends Component {
    render() {
        return (
            <div className='Person'>
            <p onClick={this.props.xyz}>I am {this.props.name} and I am {this.props.age} years old!</p>
            <p>{this.props.children}</p>
           <input type="text" onChange={this.props.xyzchanged} defaultValue={this.props.name}/>
           </div>
        )
    }
}

Person.propTypes = {
    xyz:PropTypes.func,
    name:PropTypes.string.isRequired, // name is required to be passed when called in Persons.js render method
    age:PropTypes.number,
    xyzchanged:PropTypes.func
}

export default Person;

使用prop-types，如果变量没有您期望的数据类型，您将在控制台中看到警告。另外，我建议您也使用console.log。

反应：如何防止表单提交后整数值变为NaN

2 个答案: