我正在嘗試使用按鈕驗證電子郵件 TextField。我正在使用道具來存盤電子郵件 TextField 的錯誤狀態。
電子郵件文本欄位代碼：
<TextField
required
error={values.emailInvalid}
id="emailAddress"
name="emailAddress"
label="Email Address"
onChange={handleChange("email")}
defaultValue={values.email}
fullWidth
autoComplete=""
variant="standard"
/>
按鈕代碼：
var re = /\S @\S \.\S /;
var testEmail = re.test(this.props.values.email);
if (this.props.values.email.length === 0 || !testEmail) {
this.props.values.emailInvalid = true;
} else {
this.props.values.emailInvalid = false;
//go next page
}
console.log(this.props.values.emailInvalid);
“emailInvalid”布林值根據控制臺輸出正確更新，但 TextField 沒有明顯顯示紅色錯誤狀態是“emailInvalid”設定為 true。
uj5u.com熱心網友回復：
您不能只用 分配 emailInvalid 的值this.props.values.emailInvalid = true。
如果 values 是一個狀態物件，你還需要setState在 props 中傳遞函式并像下面這樣使用它
this.props.setState({ emailInvalid:true })
此外，您應該在 TextField 組件中使用this.props.values而不是values
uj5u.com熱心網友回復：
例如，您需要使用 setState 來改變組件狀態
SetEmailInvalid(true);
對于基于類的組件：
this.setState({emailInvalid: true});
您不能直接編輯反應狀態。打開這個鏈接看看為什么
uj5u.com熱心網友回復：
不支持您在 React 中更改事物的方式。您可以按照本指南進行操作：首先：道具是只讀的，您無法更改它們。其次，對于更改必須在瀏覽器中顯示的內容，它是通過 State 完成的。修復你的錯誤首先匯入 useState 像：（我們使用狀態作為鉤子）
import {useState} from "react";
那么你必須使用你的狀態并初始化金額：
const [emailIsValid, setEmailIsValid] = useState(true)
這會將 emailIsValid 的初始值設定為 true。
現在，每當您想更改 emailIsValid 的值時，都必須呼叫 set 函式并將值設定為： setEmailIsValid(false)
現在你可以在你的 react 組件的任何地方使用 emailIsValid 了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416678.html
標籤：