javascript - React：如何防止表单提交后整数值变为 NaN

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。奇怪的是，虽然 'incomeTax'、'nationalInsurance' 和 'combined' 的计算有效（意味着它们基于 'rate' 的原始输入和生成的 'totalFees' 值），但我的其他变量值返回 NaN。有人可以解释为什么有问题的变量在表单提交时返回 NaN 以及我能做些什么来防止这种情况发生吗？谢谢。

标签： javascriptreactjsforms

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
        });
    }