我已經研究了一個小時，互聯網上似乎沒有太多例子。我正在嘗試驗證輸入欄位，以便填充所有欄位，否則會出現錯誤。字符數量無關緊要，只需要填寫輸入即可。
所以這是我的狀態物件
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
...,
};
}
這是材料 ui 文本欄位
<TextField
className={classes.formInput}
name="firstName"
onChange={e => this.handleChange(e.target.value)}
required
id=""
type="text"
InputLabelProps={{
shrink: true,
}}
error={!firstName}
helperText="Name is required"
label="First Name"
variant="standard" />
<TextField
className={classes.formInput}
name="lastName"
onChange={e => this.handleChange(e.target.value)}
required
id=""
type="text"
InputLabelProps={{
shrink: true,
}}
label="Last Name"
variant="standard" />
這是 onchange 處理程式
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
uj5u.com熱心網友回復：
很可能您只想在用戶嘗試提交表單后添加此驗證。然后，您應該為formError它創建一個新狀態并將其添加到您的提交函式條件中，該條件將檢查您的輸入是否為空，然后將 state 設定formError為 true。之后，您的輸入錯誤狀態運算式將如下所示：
error={formError && firstName.length === 0}
只有當您嘗試提交帶有空輸入的表單時，您的輸入才會以紅色突出顯示，您將獲得良好的用戶體驗。
uj5u.com熱心網友回復：
當用戶提交表單時，由于您要做的就是驗證是否在 firstName 和 lastName 欄位中填寫了某些內容，因此您可以使用以下任一方法進行檢查：
this.state.field !== '' //returns true if it's filled in
或者
this.state.field.length > 0 //returns true if it's filled in
在您創建的任何“handleSubmit”函式中，您都可以呼叫一個單獨的函式來驗證您的所有欄位。該驗證函式可能如下所示：
// returns 'true' if fields filled out, and 'false' if not
validateForm = () => {
if (this.state.firstName === '' || this.state.lastName === '') {
//set error message: 'Please fill out all fields')
return false;
} else {
return true;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/347463.html
標籤：javascript 反应 验证 材质-ui 输入字段