我有一個有幾個欄位的基本表格。其中一些是必填的。我想顯示一條 "錯誤 "資訊，說明在用戶點擊驗證按鈕之前，該欄位不能為空。我還想檢查電子郵件的有效性
。 。 export default class UploadFiles extends Component {
constructor（props） {
super（props）。
this.selectFile = this。 selectFile.bind（this）。
this.upload = this。 upload.bind（this）。
this.handleChangeForm = this。 handleChangeForm.bind（this）。
this.state = {
selectedFiles: undefined,
currentFile: undefined,
progress: 0,
message: "",
isError: false,
fileInfos: [],
typeSource:"avicca"/span>,
hiddenUpload: false,
entreprise: ""。
nom: "",
prenom: "",
email: "",
telephone: "",
sujet: "",
commentaire: ""。
};
}
handleChangeForm（event）{
const value = event.target.value。
this.setState（ {
...this.state。
[event.target.name] : value
});
console.log([event.target.name]) ' : ' event.target.value)
}
return (
<div className="mg20"/span>>
< Typography variant="h4" style={{ marginBottom。 '0. 5em'}}>
資格認證測驗
</Typography>/span>
<FormControl style ={{minWidth:/span> 120, verticalAlign: 'middle', width: "100%", marginLeft:"60%" }}>
<TextField。
id="entreprise"。
name="entreprise"
label="Nom entreprise"/span>
value={this.state.entreprise}>
onChange={this.handleChangeForm}。
variant="exported" margin="normal" fullWidth size="small" required/>
<TextField
id="nom"
name="nom"/span>
label="Votre nom"
value={this.state.nom}>
onChange={this.handleChangeForm}。
variant="exported" margin="normal" fullWidth size="small" required/>
<TextField
id="prenom"
name="prenom"
label="Votre prénom"/span>
value={this.state.prenom}
onChange={this.handleChangeForm}。
variant="exported" margin="normal" fullWidth size="small" required/>
<TextField
id="email"。
name="email"
type="email"/span>
label="Votre adresse email"
value={this.state.email}
onChange={this.handleChangeForm}。
variant="exported" margin="normal" fullWidth size="small" required/>
<TextField
id="telephone"。
name="phones"
label="Votre téléphone"/span>
value={this.state.telephone}。
onChange={this.handleChangeForm}。
variant="exported" margin="normal" fullWidth size="small" required/>
<TextField
id="sujet"
name="sujet"/span>
label="Le sujet"/span>
value={this.state.sujet}>
variant=" outlined" margin="normal" size="small" />
<TextField
id="commenttaire"
name="commenttaire"/span>
label="Commentaire"/span>
value={this.state.commentaire}。
variant=" outlined" margin="normal" size="small"
type='string'/span> multiline row={3} minRows={3} />
< label id="lbl-upload" htmlFor="btn-upload"/span> style={{margin: 15}}>
<input。
id="btn-upload"。
name="btn-upload"
style={{ display: 'none' }}.
type="file"
onChange={this.selectFile} />/span>
<Button
className="btn-choose"。
variant=" outlined"
component="span"/span>
style={{marginLeft: "42%"}} >
旁觀者
</Button>/span>
</label>/span>
<Button
className="btn-upload"/span>
color="primary"/span>
variant="contain"
component="span"/span>
disabled={! selectedFiles && !this.state.hiddenUpload}。
onClick={this.upload}>
承諾
</Button>
</FormControl>我還是React的新手，我想我想要的是一個onChange和handleChange，它將查看值是否為空
。注意：我曾經用useStates制作表單，但這次是一個類
。如果你需要更多資訊，請問我。
uj5u.com熱心網友回復：
因為你在你的狀態中設定了動態鍵，你可以先檢查一些東西是否存在，然后按你想要的方式來處理它。
因此，作為例子，你的第一個欄位被稱為entreprise，當你在該欄位中輸入時，你將有一個新狀態。this.state.entreprise與target.value
。因此，如果您想在entreprise欄位為空時彈出一個錯誤，您可以使用類似的方法：
！this.state。 entreprise && <do something>/span>
現在，既然你提到你通常使用功能型組件，那么可能值得一提的是，useState和setState的想法幾乎是一樣的，不同的是功能型組件的操作方式不那么混亂和簡單，而且在類組件中，狀態總是一個物件，而功能型組件的狀態可以是任何型別。
uj5u.com熱心網友回復：
function validateEmail(email) {
const re = /^([^<>()[]. ,;:s@"] (.[^<>()[].,;:s@"] )*)|(". "))@((
[[0-9]
{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9] .) [a-zA-Z]
{2,}))$/;
return re.test(String(email).toLowerCase() )。
你可以使用這個函式來驗證一封電子郵件。它包含一個正則運算式，用于檢查一個字串是否是電子郵件。
此外，你還可以使用三元運算子，像這樣拋出一個錯誤。
！this.state.email ? Error Message : null ?
謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/334271.html
標籤：
上一篇：R模擬具有唯一觀測值的樣本