在 ReactJS 的 onBlur 事件中验证

Question

我有一个很长的问题。所以基本上，我有一个文本框，如果填充了 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 那么你能告诉我如何做到这一点吗？

谢谢...

Answer 1

如果您需要更高级的方法，请查看下面的 codesandbox Link。

Link: 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}
          />

在 ReactJS 的 onBlur 事件中验证

Validation in onBlur event in ReactJS

validation

input

onblur

reactjs