Блог

У меня длинный вопрос. Итак, в принципе, у меня есть текстовое поле, которое, если оно заполнено вызовом 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, Так что не могли бы вы дать мне какое-либо представление о том, как я могу это сделать?

Спасибо…

Если вам нужен более продвинутый способ, перейдите по ссылке codesandbox ниже.

Ссылка: 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}
          />