reactjs - 为什么我的数字输入框只有在第一次输入时仍然显示字母或符号？（反应）

Question

我实际上已经制作了两个输入框（现金金额范围，例如，从 100 美元到 200 美元）只输入带有单个句点、逗号并固定为 2 个小数位的数字，但是当我输入字母或符号时，它们是可见的，但是仅在第一次尝试时。请参阅下面的 GIF：

看动图

起初，输入框可以填充所有字符或符号，但是当我单击下一个输入框或某处时，输入消失了（因为它们不是数字）。我在这里想要实现的是防止输入框填充字母或其他符号，并严格只填充数字。我在这里做错了什么？

<InputBox
    className="input_midsmall"
    id={self.state.fields.remittAmtFr.fieldCd}
    placeholder="From"
    onChange={onChangeField}
    value={self.state.formData.remittAmtFr}
    inputType="text"
    onBlur={onBlurAmount}
    onFocus={onFocusAmount}
/> 

render() {
        function isAmount(value: string) {
            // default limit to 12
            return /^\d{0,13}(\.\d{0,2})?$/.test(value)
        }
        const self = this
        const { intl } = this.props
        const onChangeField = function (this: any, event: any, desc: string) {
            const vm = this || event.target
            const fieldCd = vm ? vm.id : desc 
            let value = !_.isUndefined(event.target)? event.target.value : event
            const setState = (prevState: any) => {
                const formData = prevState.formData
                switch (fieldCd) {
                    case self.state.fields.remittAmtFr.fieldCd:
                    case self.state.fields.remittAmtTo.fieldCd:
                        value = isAmount(value) ? value : formData[fieldCd]
                        break
                }

                formData[fieldCd] = value

                if(_.isEqual(self.state.fields.dateTo.fieldCd, fieldCd) && _.isNull(value)){
                    FormValidation.clearErrors(prevState.fields, self.state.fields.dateFr.fieldCd)
                }

                if(_.isEqual(self.state.fields.dateFr.fieldCd, fieldCd) && _.isNull(value)){
                    FormValidation.clearErrors(prevState.fields, self.state.fields.dateTo.fieldCd)
                }

                const fields = FormValidation.clearErrors(prevState.fields, fieldCd)

                return {
                    formData,
                    fields,
                }
            }
            self.setState(setState)
            self.props.onClearAll()
            self.setupFieldAttr()
        }

const onBlurAmount = function (this: any, value: any) {
            const fieldCd = value.currentTarget.id
            let inputValue = value.currentTarget.value
            if (isNaN(inputValue) || inputValue === '') {
                inputValue = ''
            } else {
                inputValue = isAmount(inputValue)
                    ? formatAmount(inputValue)
                    : inputValue
            }
            const setState = (prevState: any) => {
                const formData = prevState.formData
                formData[fieldCd] = inputValue
                const fields = FormValidation.clearErrors(prevState.fields, fieldCd)
                return {
                    formData,
                    fields,
                }
            }
            self.setState(setState)
        }

const onFocusAmount = (value: any) => {
            const fieldCd = value.currentTarget.id
            let inputValue = value.currentTarget.value
            inputValue = formatAmountWithoutComma(inputValue)
            onChangeField(inputValue, fieldCd)
        }

标签： reactjstypescript