Basically I want to reset my quantity to 1 if equal to 0 or less. I understand I need more validation too but this is the first requirement. This this just keep resetting as soon as I start typing which is obvious

Product.component.js

import { useState, useEffect } from "react";
const Product = () => {
    const [qty, setQty] = useState(1);
    useEffect(() => { }, [qty]);
    
    const handleChange = (currentQty) => {
            if (currentQty > 0) {
                console.log("ok");
                //Do Somethong
            } else {
                setQty(1);
            }
        };
    return (
            <input type="text" value={qty} onChange={(e) => handleChange(e.target.value)} />
    );
};
export default Product;

CodePudding user response：

Since you're using a controlled input, you have to be very careful about setting the value of the input because doing so can get in the way of the user trying to type their value (as you've found).

Instead, I'd:

• Only set qty when the string is valid
• Track the string separately
• Add a validation pattern to the input
• Use CSS to provide feedback on the value being entered
• (Maybe) Use a placeholder to suggest to the user what to enter

Here's an example:

const { useState, useEffect } = React;

const Product = () => {
    // The actual quantity
    const [qty, setQty] = useState(1);
    // The quantity string the user is editing
    const [qtyString, setQtyString] = useState(String(qty));
    
    const handleChange = (valueString) => {
        // Always update the string
        setQtyString(valueString);
        // Is it a valid positive number?
        valueString = valueString.trim();
        const value = valueString ?  valueString : NaN;
        if (isNaN(value) || value <= 0) {
            // No, our quantity is 1 (even though the string may
            // not be)
            setQty(1);
        } else {
            // Yes, use it
            setQty(value);
        }
    };

    // Just for demo purposes:
    console.log(`qty = ${qty}, qtyString = ${JSON.stringify(qtyString)}`);

    return (
        <input
            placeholder="Please provide a number > 0"
            pattern="^[1-9]\d*$"
            type="text"
            value={qtyString}
            onChange={(e) => handleChange(e.target.value)}
        />
    );
};

const Example = () => {
    return <Product />;
};

ReactDOM.render(<Example />, document.getElementById("root"));

input[type=text]:invalid,
input[type=text]:invalid::placeholder{
    color: #800;
}
input[type=text]::placeholder {
    opacity: 0.8;
    font-size: .8em;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

The validation pattern I've included there is for whole numbers greater than zero, you'll want to adjust it if you want partial numbers. (I figured "quantity" was probably a whole number.)

CodePudding user response：

Why don't you simply put a "min" attribute in your input tag? As far as I understand your problem that would solve it.