时间戳

首页 > 解决方案 > ReactJS 中 onBlur 事件的验证

reactjs - ReactJS 中 onBlur 事件的验证

问题描述

我有一个很长的问题。所以基本上，我有一个文本框，如果填充了 API 调用，并且默认情况下它是只读的。用户可以做的是单击文本框并进行更改。然后如果用户在外面点击，值就会更新。所以这是我的输入组件：

import React, { useState } from "react";
import PropTypes from "prop-types";
import { Form } from "react-bootstrap";

const InputPrice = ({ mainPricePosts, handleChange, onFocus }) => {
  const [disabled, setDisabled] = useState(true);
  function handleClick() {
    if (disabled === true) {
      setDisabled(false);
    }
  }

  return (
    <>
      <Form.Control
        type="text"
        className="price_coefficient_input"
        defaultValue={mainPricePosts}
        onBlur={(e) => {
          setDisabled(true);
          handleChange(mainPricePosts, e.target.value);
        }}
        onFocus={onFocus}
        readOnly={disabled}
        onClick={handleClick}
      />
    </>
  );
};

InputPrice.propTypes = {
  mainPricePosts: PropTypes.object.isRequired,
  handleChange: PropTypes.func.isRequired,
};

export default InputPrice;

所以，handleChange在这个输入组件的父组件中，基本上就是：

const handleChange = (mainPricePosts, value) => {
    fetchIndividualPosts({ mainPricePosts, value });
  };

我想要做的是在这个字段中添加验证。所以，文本框应该只有数字，并且在逗号之后最多应该有 4 个数字，例如4.4569那么你能告诉我如何做到这一点吗？

谢谢...

标签： reactjsvalidationinputonblur

解决方案

如果您需要更高级的方法，请查看下面的代码和框链接。

链接：https ://codesandbox.io/s/formvalidation-y3qm7?file=/src/App.js

 <Form.Control
            type="number"
            className="price_coefficient_input"
            defaultValue={mainPricePosts}
            onBlur={(e) => {
              setDisabled(true);
              e.target.value = parseFloat(e.target.value).toFixed(4);
              handleChange(mainPricePosts, e.target.value);
            }}
            onFocus={onFocus}
            readOnly={disabled}
            onClick={handleClick}
          />

推荐阅读