我在 React 中創建了一個專案。我希望當用戶單擊“提交”按鈕時，如果在輸入“FormDebut”中他輸入“文本”型別的字符，它會向他顯示一條錯誤訊息。
但我不能這樣做:'(，你能幫我嗎？提前謝謝！
FormulaireReservations.js ：
export default function FormulaireReservation() {
return (
<div className="Formulaire">
<Logo/>
<h2><center>Formulaire de réservation</center></h2>
<FormDebut/>
<center><input type="submit" value="Submit" /></center>
</div>
);
}
組件 FormDebut.js ：
const [value, setValue] = React.useState("");
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}/>
</div>
)
}
export default FormDebut; ```
uj5u.com熱心網友回復：
在新檔案中對此進行測驗，然后您可以從那里將其實施到您的作業中。您可以有一個引數，如果用戶必須輸入 1-10 之間的數字，如果他們不輸入，那么您可以顯示錯誤訊息。如果數字在 1-10 之間，那么您可以重定向它們。isNAN（不是數字）是一個條件，用于驗證用戶的輸入。該函式將檢查輸入是否不是數字，它將檢查輸入是否小于 1 或大于 10，如果所有這些條件都為真，則會顯示錯誤。
<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>
uj5u.com熱心網友回復：
我不確定我是否理解您的要求，但似乎當您單擊提交按鈕時，您想檢查輸入是否為數值。如果是這種情況，這應該有效：
https://codesandbox.io/s/infallible-browser-74r5d7?file=/src/App.js
我將值狀態移動到表單本身，并將其作為道具傳遞給它的孩子。我還添加了一個名為 error 的新狀態變數，它被傳遞給 FormDebut。單擊提交按鈕時，我:從值中洗掉并檢查是否可以將其決議為數字。如果不是，我設定錯誤，否則我清除錯誤。
希望有幫助
uj5u.com熱心網友回復：
以下是您可以修改組件的內容：
在您的 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>
);
}
在你的 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;
因此，基本上，值和 errorMsg 狀態被傳遞給另一個包含輸入欄位的組件。每次輸入欄位的更改也會更新父組件中宣告的狀態。當用戶單擊提交按鈕時，它會呼叫一個檢查值是否為數字的函式。基于此，errorMsg 狀態被更新。在 FormDebut 組件中，如果設定了任何 msg，則會在輸入欄位之后顯示錯誤訊息。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483151.html
標籤：javascript html css 反应