Tengo dos campos de entrada de tipo número, uno para el valor mínimo y otro para el valor máximo. En cualquier momento el usuario puede actualizar estos valores, pero el valor mínimo no puede ser mayor que el valor máximo y viceversa. Estas son mis funciones a las que estoy llamando en el evento de entrada 'onChange':
function minValUpdateHandler(e) { setMin((prevVal) => { const valInNum = +e.target.value; if (valInNum < max) { return valInNum; } return prevVal; }); } function maxValUpdateHandler(e) { setMax((prevVal) => { const valInNum = +e.target.value; if (valInNum > min) { return valInNum; } return prevVal; }); }Y este es el enlace de codesandbox para el POC. Por favor, ayúdame con esto.
Gracias
el problema era el tipo de valor, el tipo de valor es String por lo que '9' puede ser mayor que '10' este código puede resolver el problema
parseInt(e.target.value,10); Además, no puede establecer el atributo min desde la entrada min y max para la entrada max
Sugiero usar return max-1; en lugar de return prevVal y return min+1; en lugar de return prevVal
import "./styles.css"; export default function App() { const [min, setMin] = useState(0); const [max, setMax] = useState(100); function minValUpdateHandler(e) { setMin((prevVal) => { const valInNum = +parseInt(e.target.value); if (valInNum < max) { return valInNum; } return max-1; }); } function maxValUpdateHandler(e) { setMax((prevVal) => { const valInNum = +parseInt(e.target.value); if (valInNum > min) { return valInNum; } return min+1; }); } return ( <div className="App"> <h1>Min Max input</h1> <div className="inputContainer"> <div> <label htmlFor="min">Min</label> <input type="number" id="min" value={min} max={max - 1} onChange={minValUpdateHandler} /> </div> <span>-</span> <div> <label htmlFor="max">Max</label> <input type="number" id="max" value={max} min={min + 1} onChange={maxValUpdateHandler} /> </div> </div> </div> ); }