Pruébelo en un documento nuevo y, a partir de ahí, podrá implementarlo en su trabajo. Puede tener un parámetro donde el usuario debe ingresar un número entre 1 y 10; si no lo hace, puede mostrar un mensaje de error. Si el número está entre 1 y 10, puede redirigirlos. isNAN (no es un número) es una condición y se usa para validar la entrada del usuario. La función verificará si la entrada no es un número, verificará si la entrada es menor que 1 o mayor que 10, si todas estas condiciones son verdaderas, mostrará un error.

 <p>Please input a number between 1 and 10:</p> <input id="numb"> <button type="button" onclick="myFunction()">Submit</button> <p id="demo"></p> <script> function myFunction() { // Get the value of the input field with id="numb" let x = document.getElementById("numb").value; // If x is Not a Number or less than one or greater than 10 let text; if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text; } </script>

No estoy seguro de haber entendido sus requisitos, pero parece que cuando hace clic en el botón Enviar, desea verificar si la entrada es un valor numérico. Si ese es el caso, esto debería funcionar:

https://codesandbox.io/s/navegador-infalible-74r5d7?file=/src/App.js

Moví el estado de valor al Formulario mismo y lo pasé como accesorio a su hijo. También agregué una nueva variable de estado llamada error que se pasa a FormDebut. Al hacer clic en el botón Enviar, elimino : del valor y compruebo si puedo analizarlo en un número. Si no, configuro el error, de lo contrario borro el error.

Espero que ayude

Aquí hay algo que puede modificar sus componentes:

en su FormulaireReservations.js:

 export default function FormulaireReservation() { const [value, setValue] = React.useState(""); const [errorMsg, setErrorMsg] = React.useState(""); const handleSubmission = () => { if (isNaN(value)) { setErrorMsg('Input should not be a text') } } React.useEffect(() => { setErrorMsg('') }, [value]) return ( <div className="Formulaire"> <Logo /> <h2><center>Formulaire de réservation</center></h2> <FormDebut value={value} setValue={setValue} msg={errorMsg} /> <center><input type="button" onClick={handleSubmission} value="Submit" /></center> </div> );

}

y en su FormDebut.js:

 function FormDebut({ value, setValue, msg }) { const onChange = (e) => { const formattedValue = formatInput(e.target.value); if (formattedValue.length < 6) { setValue(formattedValue); } } const formatInput = (input) => { if (input.length > 2 && input[2] !== ":") { return input.substring(0, 2) + ":" + input.slice(2); } return input; } return ( <div className="Form"> <div>Début : </div> <input placeholder="00:00" type="text" onChange={onChange} value= {value} /> { msg && <p>{msg}</p> } </div> )}export default FormDebut;

Entonces, básicamente, el valor y el estado del mensaje de error se pasan a otro componente que contiene el campo de entrada. Cada vez que cambie el campo de entrada, también se actualizará el estado declarado en el componente principal. Cuando un usuario hace clic en el botón Enviar, llama a una función que verifica si el valor es un número o no. Basado en eso, el estado de errorMsg se actualiza. Y en el componente FormDebut, el mensaje de error se mostrará justo después del campo de entrada si se configuró algún mensaje.