Reactjs 只使用整数，不使用小数

我需要解决一些问题。我有我的号码选择器，我的问题如下：

“无法读取null的属性'value'”

我只想在我的NumberPicker中插入整数值

  import React from "react";
  import NumberPicker from 'react-widgets/lib/NumberPicker';
  import simpleNumberLocalizer from "react-widgets-simple-number";
  import * as NumericInput from "react-numeric-input";


    simpleNumberLocalizer();

  const handleBlur = (e) => {
     if (e.currentTarget.value === '0') e.currentTarget.value = '1'
  }

    const handleKeypress = (e)  => {
          const characterCode = e.key
             if (characterCode === 'Backspace') return

             const characterNumber = Number(characterCode)
            if (characterNumber >= 0 && characterNumber <= 9) {
        if (e.currentTarget.value && e.currentTarget.value.length) {
          return
        } else if (characterNumber === 0) {
          e.preventDefault()
       }
      } else {
                e.preventDefault()
     }
    }



 const numberPicker = ({
     step,
     precision,
     input,
     placeholder,
     label,
     handleBlur,
     handleKeypress,
     meta: { touched, error },
   ...rest
 }) => {return(
    <div className='form-group'> 

 <label forname={input.name}>{label}</label> <br />
       <NumericInput
       {...rest}
       placeholder={placeholder}
       selected={input.value ? new NumericInput(input.value) : null}
          onChange={input.onChange}
         onKeyDown={(changedVal) => handleKeypress(changedVal)}
         onBlur={(changedVal) => handleBlur(changedVal)}
         min='1'
         step='1' 
         style={{
           wrap: {
               background: '#E2E2E2',
               boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
               padding: '2px 2.26ex 2px 2px',
               borderRadius: '6px 3px 3px 6px',
               fontSize: 32
           },
           input: {
               borderRadius: '4px 2px 2px 4px',
               color: '#988869',
               padding: '0.1ex 1ex',
               border: '1px solid #ccc',
               marginRight: 4,
               display: 'block',
               fontWeight: 100,
               textShadow: '1px 1px 1px rgba(0, 0, 0, 0.1)'
           },
           'input:focus' : {
               border: '1px inset #69C',
               outline: 'none'
           },
           arrowUp: {
               borderBottomColor: 'rgba(66, 54, 0, 0.63)'
           },
          arrowDown: {
               borderTopColor: 'rgba(66, 54, 0, 0.63)'
           }
       }}
         className='form-control'
  />
    <div className='text-danger' style={{ marginBottom: '20px' }}>
         {touched && error}
       </div>
       </div>
);
};
  export default numberPicker;

那是我的电话号码

  import React from "react";
  import NumberPicker from 'react-widgets/lib/NumberPicker';
  import simpleNumberLocalizer from "react-widgets-simple-number";
  import * as NumericInput from "react-numeric-input";


    simpleNumberLocalizer();

  const handleBlur = (e) => {
     if (e.currentTarget.value === '0') e.currentTarget.value = '1'
  }

    const handleKeypress = (e)  => {
          const characterCode = e.key
             if (characterCode === 'Backspace') return

             const characterNumber = Number(characterCode)
            if (characterNumber >= 0 && characterNumber <= 9) {
        if (e.currentTarget.value && e.currentTarget.value.length) {
          return
        } else if (characterNumber === 0) {
          e.preventDefault()
       }
      } else {
                e.preventDefault()
     }
    }



 const numberPicker = ({
     step,
     precision,
     input,
     placeholder,
     label,
     handleBlur,
     handleKeypress,
     meta: { touched, error },
   ...rest
 }) => {return(
    <div className='form-group'> 

 <label forname={input.name}>{label}</label> <br />
       <NumericInput
       {...rest}
       placeholder={placeholder}
       selected={input.value ? new NumericInput(input.value) : null}
          onChange={input.onChange}
         onKeyDown={(changedVal) => handleKeypress(changedVal)}
         onBlur={(changedVal) => handleBlur(changedVal)}
         min='1'
         step='1' 
         style={{
           wrap: {
               background: '#E2E2E2',
               boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
               padding: '2px 2.26ex 2px 2px',
               borderRadius: '6px 3px 3px 6px',
               fontSize: 32
           },
           input: {
               borderRadius: '4px 2px 2px 4px',
               color: '#988869',
               padding: '0.1ex 1ex',
               border: '1px solid #ccc',
               marginRight: 4,
               display: 'block',
               fontWeight: 100,
               textShadow: '1px 1px 1px rgba(0, 0, 0, 0.1)'
           },
           'input:focus' : {
               border: '1px inset #69C',
               outline: 'none'
           },
           arrowUp: {
               borderBottomColor: 'rgba(66, 54, 0, 0.63)'
           },
          arrowDown: {
               borderTopColor: 'rgba(66, 54, 0, 0.63)'
           }
       }}
         className='form-control'
  />
    <div className='text-danger' style={{ marginBottom: '20px' }}>
         {touched && error}
       </div>
       </div>
);
};
  export default numberPicker;

从“React”导入React；
从“react widgets/lib/NumberPicker”导入NumberPicker；
从“react widgets simple number”导入simpleNumberLocalizer；
从“反应数字输入”导入*作为数字输入；
simpleNumberLocalizer（）；
常量车把LUR=（e）=>{
如果（e.currentTarget.value=='0'）e.currentTarget.value='1'
}
恒量手柄按键=（e）=>{
常量characterCode=e.key
if（characterCode==='Backspace'）返回
常量characterNumber=数字（字符代码）
如果（characterNumber>=0&&characterNumber{返回(
{label}

手动按键（更改键）}
onBlur={（changedVal）=>handleBlur（changedVal）}
min='1'
步骤class='1'
风格={{
包裹：{
背景：“#E2E2”，
boxShadow:'0 0 1px 1px#fff插图，1px 1px 5px-1px#000'，
填充：“2px2.26ex 2px2px”，
边界半径：“6px 3px 3px 6px”，
字体大小：32
},
输入：{
边界半径：“4px 2px 2px 4px”，
颜色：“#988869”，
填充：“0.1ex 1ex”，
边框：“1px实心#ccc”，
marginRight:4，
显示：“块”，
体重：100，
textShadow:'1px 1px 1px rgba（0,0,0,0.1）'
},
“输入：焦点”：{
边框：“1px插图#69C”，
大纲：“无”
},
向上箭头：{
borderBottomColor:'rgba（66,54,0,0.63）'
},
向下箭头：{
borderTopColor:'rgba（66,54,0,0.63）'
}
}}
className='form-control'
/>
{触碰&&error}
);
};
导出默认的numberPicker；

我正在插入整数值，当我在其他字段中单击时，应用程序崩溃，出现错误“无法读取null的属性'value'”

---

我做错了什么？我做错了什么。

您的组件希望

handleBlur

和

handleKeypress

作为道具提供

基本上，这里发生的事情是，您在

numberPicker

函数的范围内重新定义了

handleBlur

和

handleKeypress

，它们是未定义的，因为您在使用组件时没有传递它们

从参数分解中删除

handleBlur

和

handleKeypress

：

const numberPicker = ({
     step,
     precision,
     input,
     placeholder,
     label,
     handleBlur, // delete this line
     handleKeypress, // delete this line
     meta: { touched, error },
   ...rest
 })

---

我刚才删除了这两行。这是我遇到问题时的一行：if（e.currentTarget.value=='0'）e.currentTarget.value='1'。我弄错了。抱歉。错误是：无法读取的属性'value'null@FranciscoArias老实说，我不知道你想用这些函数做什么。

react numeric input

似乎可以处理你想做的一切。我要删除你的

handleBlur

和

handleKeypress

的功能完全依赖于

上的

min

和

step

道具。只需确保使用数字而不是字符串：

min={1}

，而不是

min='1'

。我刚刚解决了这个问题。我想在这些行中将e.target.value替换为e.target.value。const handleBlur=（e）=>。如果（e.currentTarget.value=='0'）e.currentTarget.value='1'}//和if（e.currentTarget.value&&e.currentTarget.value.length）{分别位于handleBlur和handleKeyPress中。