Javascript 只有数字。在React中输入数字

我试图从输入中排除正负，但它出了问题：

handleChange（事件）{
const value=event.target.value.replace（/\+\124;-/ig'，）；
this.setState（{financialgal:value}）；
}

渲染输入代码：

---

我试着模仿你的代码，注意到对

的反应有一个问题。有关解决方法，请检查此示例并亲自尝试：

您需要将其定义为普通输入（type='text'），模式仅适用于数字：

    <input type="text" pattern="[0-9]*"
     onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />

这种方法的最大警告是，对于移动-->而言，键盘不是数字格式，而是普通字母格式。

• 要停止键入，请使用

  onKeyPress

  而不是

  onChange

• 在

  onKeyPress

  内部使用

  event.preventDefault（）

  意味着停止按压事件

• 由于

  keyPress

  处理程序在

  onChange

  之前触发，因此必须检查按下的键（

  event.keyCode

  ），而不是输入的当前值（

  event.target.value

  ）

下面的演示一行代码

<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>

this.setState（{financialGoal:event.target.value.replace（/\D/，''）}/>

如果您想保持输入

type='number'

（可能是移动设备触发数字键盘），您应该使用

onInput

而不是

onChange

来捕获事件更改

使用

onInput

修复了在数字输入中键入文本会绕过我在

onChange

中分配给它的验证的错误。一旦我将此函数固定为在

onInput

中调用，它将在所有实例中触发

下面是我正在做的一个例子：

<input
    type='number'
    id={`player${index}Score`}
    className='form-control'
    pattern='[0-9]{0,5}'
    onInput={(event) => this.enterScore(event, index)}
    value={this.props.scoreLabel(this.state.scores[index])}
/>

this.enterScore（事件、索引）}
value={this.props.scoreLabel（this.state.scores[index]）
/>

我希望这有帮助

编辑-08-03-2018： 我想出了一个更好的解决办法。在输入组件本身中使用type='tel'和模式regex

下面是我如何将其连接起来的具体细节：

class Input extends React.Component {
  state = {message: '3'};

  updateNumber = (e) => {
    const val = e.target.value;
    // If the current value passes the validity test then apply that to state
    if (e.target.validity.valid) this.setState({message: e.target.value});
    // If the current val is just the negation sign, or it's been provided an empty string,
    // then apply that value to state - we still have to validate this input before processing
    // it to some other component or data structure, but it frees up our input the way a user
    // would expect to interact with this component
    else if (val === '' || val === '-') this.setState({message: val});
  }

  render() {
    return (
      <input
        type='tel'
        value={this.state.message}
        onChange={this.updateNumber}
        pattern="^-?[0-9]\d*\.?\d*$"
      />
    );
  }
}

ReactDOM.render(<Input />, document.getElementById('main'));

类输入扩展了React.Component{
状态={消息：“3'}；
updateNumber=（e）=>{
const val=e.target.value；
//如果当前值通过有效性测试，则将其应用于状态
if（e.target.validity.valid）this.setState（{message:e.target.value}）；
//如果当前val只是一个否定符号，或者提供了一个空字符串，
//然后将该值应用于状态-我们仍然需要在处理之前验证该输入
//它可以转换为其他组件或数据结构，但它可以像用户一样释放我们的输入
//将期望与此组件交互
else如果（val==''| val=='-'）这个.setState（{message:val}）；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'main'））；

---

我有一个关于这方面的例子，也许它会对某些人有所帮助
最近我将此解决方案用于我的应用程序
我不确定这是一个正确的解决方案，但效果很好

this.state = {
    inputValue: "",
    isInputNotValid: false
}

handleInputValue = (evt) => {
    this.validationField(evt, "isInputNotValid", "inputValue");
}

validationField = (evt, isFieldNotValid, fieldValue ) => {
   if (evt.target.value && !isNaN(evt.target.value)) {
        this.setState({ 
            [isFieldNotValid]: false,
            [fieldValue]: evt.target.value,
        });
    } else {
        this.setState({ 
            [isFieldNotValid]: true,
            [fieldValue]: "",
        });
    }
}

<input className={this.state.isInputNotValid ? "error" : null} type="text" onChange="this.handleInputValue" />

this.state={
输入值：“”，
isInputNotValid:false
}
handleInputValue=（evt）=>{
这个.validationField（evt，“isInputNotValid”，“inputValue”）；
}
validationField=（evt，isFieldNotValid，fieldValue）=>{
if（evt.target.value&&！isNaN（evt.target.value））{
这个.setState（{
[isFieldNotValid]：false，
[字段值]：evt.target.value，
});
}否则{
这个.setState（{
[isFieldNotValid]：true，
[fieldValue]：“”，
});
}
}

其主要思想是，在条件为非真且值为空之前，状态不会更新
不需要使用onKeyPress、Down等，
如果您使用这些方法，它们在触摸设备上也不起作用

解决方案 今天，我发现使用

parseInt（）

也是一种很好且干净的做法。下面是一个

onChange（e）

示例

代码 解释

如果参数不是数字，

parseInt（）

将返回

NaN

parseInt（'12a'）

将返回12

---

使用如下所示的

onChange（）

方法定义一个输入（在我的例子中，childState包含传递给这个子组件的状态）

用户现在不允许在输入字段中键入除backspace、0-9或e（这是一个数字…）以外的任何内容

---

我引用了这篇文章来创建我的解决方案：

我发现的最有效、最简单的解决方案：

/[\+\-\.\，]$/.test（e.key）和&e.preventDefault（）
/>

2019回答晚了，但希望它能帮助别人

这将确保您不会在空文本字段上获得null

• Textfield值始终为0
• 退格时，将以0结束
• 当值为0并开始键入时，0将替换为实际数字

//当textfield为空时，这将确保值从不为null
常数最小值=0；
导出默认值（道具）=>{
常量[计数，更改计数]=使用状态（最小值）；
函数验证（计数）{
返回parseInt（计数）|最小值
}
函数handleChangeCount（计数）{
更改计数（验证（计数））
}
返回(
提交表格
);
};

在输入字段上设置类：

$(".digitsOnly").on('keypress',function (event) {
    var keynum
    if(window.event) {// IE8 and earlier
       keynum = event.keyCode;
    } else if(event.which) { // IE9/Firefox/Chrome/Opera/Safari
       keynum = event.which;
    } else {
       keynum = 0;
    }

    if(keynum === 8 || keynum === 0 || keynum === 9) {
        return;
    }
    if(keynum < 46 || keynum > 57 || keynum === 47) {
        event.preventDefault();
    } // prevent all special characters except decimal point
}

$(".digitsOnly").on('paste drop',function (event) {
    let temp=''
    if(event.type==='drop') {
        temp =$("#financialGoal").val()+event.originalEvent.dataTransfer.getData('text');
        var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be drag and dropped
        if (!regex.test(temp)) {
           event.preventDefault();
           return false;
        }
    } else if(event.type==='paste') {
        temp=$("#financialGoal").val()+event.originalEvent.clipboardData.getData('Text')
        var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be pasted
        if (!regex.test(temp)) {
           event.preventDefault();
           return false;
        }
    }
}

---

在componentDidMount（）中调用这些事件，以便在页面加载后立即应用该类。

在阅读了所有答案后，我提出了这个解决方案，但没有一个真正适用于数字，只适用于复制和粘贴

• parseInt

  解决方案：由于

  parseInt（“2a”）

  有效而失败

• onKeyup解决方案：

  复制粘贴失败，退格
• key.which解决方案：复制粘贴可能失败
• type=“number”解决方案：在长数字上失败，如

  javascript<
  onChange(e){
      this.setState({[e.target.id]: parseInt(e.target.value) ? parseInt(e.target.value) : ''})
  }
  
  <input
     ...
     value={this.props.childState.volume}
     ...
     onChange={(e) => handleChangeInteger(e, {volume: e.target.value})}
  />
  
  const handleChangeInteger = (e, obj_to_return) => {
    if (validator.isInt(e.target.value) || e.target.value == '') {
      this.props.childSetState(obj_to_return)
    }
  }
  
  $(".digitsOnly").on('keypress',function (event) {
      var keynum
      if(window.event) {// IE8 and earlier
         keynum = event.keyCode;
      } else if(event.which) { // IE9/Firefox/Chrome/Opera/Safari
         keynum = event.which;
      } else {
         keynum = 0;
      }
  
      if(keynum === 8 || keynum === 0 || keynum === 9) {
          return;
      }
      if(keynum < 46 || keynum > 57 || keynum === 47) {
          event.preventDefault();
      } // prevent all special characters except decimal point
  }
  
  $(".digitsOnly").on('paste drop',function (event) {
      let temp=''
      if(event.type==='drop') {
          temp =$("#financialGoal").val()+event.originalEvent.dataTransfer.getData('text');
          var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be drag and dropped
          if (!regex.test(temp)) {
             event.preventDefault();
             return false;
          }
      } else if(event.type==='paste') {
          temp=$("#financialGoal").val()+event.originalEvent.clipboardData.getData('Text')
          var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be pasted
          if (!regex.test(temp)) {
             event.preventDefault();
             return false;
          }
      }
  }
  
  <input
      name="address.line1"
      value={values.address.line1}
      onChange={(event: any) => {
        if (isFinite(event.target.value)) {
        // UPDATE YOUR STATE (i am using formik)
        setFieldValue("address.line1", event.target.value);
      }
    }}
  />
  
   <input
          className="input-Flied2"
          type="TEXT"
          name="userMobileNo"
          placeholder="Moble No"
          value={phonNumber}
          maxLength="10"
          onChange={handleChangeInput}
          required
        />
  
    const handleChangeInput = (e) => {
  const re = /^[0-9\b]+$/; //rules
  if (e.target.value === "" || re.test(e.target.value)) {
    setPhoneNumber(e.target.value);
  }
  
  const toNumber = (value: string | number) => {
      if (typeof value === 'number') return value
      return parseInt(value.replace(/[^\d]+/g, ''))
  }
  
  const formatPrice = (price: string | number) => {
    return new Intl.NumberFormat('es-PY').format(toNumber(price))
  }
  
  <input
      defaultValue={formatPrice(price)}
      onBlur={e => {
        const numberValue = toNumber(e.target.value)
        setPrice(numberValue)
        e.target.value = formatPrice(numberValue)
      }}
      type='tel'
      required
  />
  
  <input
        onKeyPress={(event) => {
          if (!/[0-9]/.test(event.key)) {
            event.preventDefault();
          }
        }}
      />
  
  <input type="text" onKeyPress={onNumberOnlyChange}/>
  
  const onNumberOnlyChange = (event: any) => {
      const keyCode = event.keyCode || event.which;
      const keyValue = String.fromCharCode(keyCode);
      const isValid = new RegExp("[0-9]").test(keyValue);
      if (!isValid) {
         event.preventDefault();
         return;
      }
  };
  
  const handleChange2 = (e) => {
      if (isNaN(e.target.value)) {
        return;
      }
      const onlyNums = e.target.value.replace(/[^0-9]/g, "");
      setFormData({
        ...formData,
        [e.target.name]: onlyNums,
      });
    };
  
    const [formData, setFormData] = useState({
      name: "",
      phone: "",
      email: "",
      address: "",
    });
  
    <input
      value={phone}
      onChange={(e) => handleChange2(e)}
      placeholder="Phone"
      type="text"
      name="phone"
      required
     />