我有一個表格，其中包含 3 個輸入的名字、姓氏、數字。因此，一旦表單打開，就會有一組特定的預填充值來自后端。因此，如果我嘗試為我的名字添加驗證檢查，并且如果用戶將欄位設定為空白并單擊提交，它會在控制臺中顯示我未定義的相應名字值。那么，有人可以幫助添加對名字、姓氏和號碼的驗證檢查嗎？
const EditContact = inject('Contacts')(observer((props) => {
const { text, Contactfirst, apptContacts } = props;
const { updateContact } = apptContacts;
const CMS = text.appointmentManager.editAppointmentContact;
const [state, setState] = React.useState({
data: {
firstName: Contactfirst[0],
lastName: Contactfirst[1],
number: Contactfirst[2],
},
firstNameValid: '',
lastNameValid: '',
numberValid: '',
});
const handleTextareaChange = (event) => {
const { data } = state;
data[event.target.name] = event.target.value;
setState({
data,
});
};
const valid = () => {
if (state.data.firstName !== 'undefined') {
setState({ firstNameValid: 'Required.Please enter your given name.' });
}
};
const saveButton = () => {
if (valid()) {
const personName = `${state.data.firstName} ${state.data.lastName}`;
const primaryContact = {
name: personName,
phoneNumber: state.data.number,
};
}
};
return (
<div>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
<h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
{CMS.heading1}
</h1>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={(state.data.firstName !== 'undefined') ? state.data.firstName : ''} />
<p>{state.firstNameValid}</p>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={(state.data.lastName !== 'undefined') ? state.data.lastName : ''} />
<p>{state.lastNameValid}</p>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={(state.data.number !== 'undefined') ? state.data.number : ''} />
<p>{state.numberValid}</p>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
<ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
</div>
);
}));
export default EditContact ;
uj5u.com熱心網友回復：
處理表單狀態和驗證是我們許多人都面臨的問題。如果您在自己解決問題時遇到問題，我建議您查看一個為您處理繁重作業的庫。一個這樣的庫是 Formik https://formik.org/docs/overview
這是一個說明它的最小示例：https : //codesandbox.io/s/zkrk5yldz
uj5u.com熱心網友回復：
如果你想為你的組件使用材料 ui，它很容易對你的文本欄位應用驗證。只需點擊此鏈接 https://mui.com/components/text-fields/#validation
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334457.html
標籤：javascript 反应
上一篇：提交表單時無法獲取欄位的默認值