时间戳

首页 > 解决方案 > 如何在 React JS 中的 NumericFormat 字段中允许运算符

javascript - 如何在 React JS 中的 NumericFormat 字段中允许运算符

问题描述

我正在使用一个 NumberFormat 文本字段，它只允许整数，但我想允许像（%、*、/、<、>、+、-、=、^）这样的运算符。

import NumberFormat from "react-number-format";
state = { name: "" }

             <NumberFormat
              {...this.props}
              placeholder=""Enter a number
              customInput={OutlinedInput}
              value={name}
              onValueChange={(e) => handleFieldChange(e.value)}
            />

    handleFieldChangeValue = (value) => {
    this.setState({name, value})

  }

如何允许此文本字段中的运算符？

标签： javascriptreactjsreduxfrontend

解决方案

以下是使用简单输入字段实现所需内容的方法regex：

import React from "react";

const regex = new RegExp('^([0-9]|[-+=^<>/%*])+$');

function App() {

  const [value, setValue] = React.useState('');

  const onChange = e => {
    if(regex.test(e.target.value) || e.target.value === "") {
      setValue(e.target.value);      
    };
  }

  return (
    <div>
      <input value={value} onChange={onChange} />
    </div>
  );
}

您也可以使用此沙箱进行检查

推荐阅读