※今回、AntDesign使ってますが、本質的な考え方はどんな作り方でも通じると思います。
Validate処理はどのようなアプリにおいても必須ですが、Reactの場合、思ったより直感的ではないというか、他の言語とは違った考え方だったのでメモしておきます。
コード
まずはコード全体像から。
//バリデーション処理
const validateFormItem = () : boolean => {
let titleError = '';
let dateError = '';
if(何かしらの判定処理){
titleError = '1~20文字までで入力してください。';
}
if(何かしらの判定処理)
dateError = '終了日は開始日以上を入力してください。';
setFormItemError({...formItemError,title:titleError, date:dateError});
//1つでも文字列が入力されていればtrueを返す処理を呼び出す
if(StringUtil.isNullOrEmpty(titleError,dateError))
return true;
else
return false;
};
//ボタンクリック時
const handleOkInfo = async () => {
if(!validateFormItem())
return;
const data = new DataClass();
data.id = formItem.id;
data.title = formItem.title;
data.endDate = formItem.endDate;
await API処理(data);
};考え方として大事なことは、「setFormItemError」のように、stateに保存した値はそのイベント呼び出し処理中に再度呼び出すことはできません（前回値が取得されます）。
コードを綺麗にしようと思えば、stateに直接エラー文字列を設定し、それで判定したくなりますが不可能です。一旦エラー文字列を他の変数に保持しておき、これをstate更新とエラー存在判定の両方に使う必要があります。
このstate更新タイミングを意識できるかどうかはReact慣れしているかの境目になりそうですね！
おまけ
1つでも引数に文字列が入力されていればtrueを返す処理。引数は”で囲った文字１つだけでも複数でも、配列でも可。
class StringUtil{
public static isNullOrEmpty(...values: (string | null | undefined)[]): boolean {
values.map(item =>{console.log(item)});
return values.every(value => value === null || value === undefined || value.trim() === '');
}
}
export default StringUtil