這兩天弄了下父子組件提交的問題栋盹,這里整理下。
1. 父組件中利术,引入子組件呈野,對(duì)子組件執(zhí)行React.forwardRef(子組件)來獲取傳遞給它的 ref,
配置子組件:<Child ref={React.useRef(null)} />
主要代碼如下:
const Child = forwardRef(FormItemTimeShedule);
{getFieldDecorator('scheduleList', {
? ? ? ? validateTrigger: ['onBlur'],
? ? ? ? rules: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? validator(_, value, callback) {
? ? ? ? ? ? ? ? ? ? value.some(item => {
? ? ? ? ? ? ? ? ? ? ? ? const errorMessage = childRef.current.getValidateError(item);
? ? ? ? ? ? ? ? ? ? ? ? if (errorMessage) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? callback(errorMessage);
? ? ? ? ? ? ? ? ? ? ? ? ? ? return true;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? callback();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ],
? ? ? ? initialValue: relativeLinkData
})(<Child ref={React.useRef(null)} {...itemProps}/>)}
2.子組件:
定義const FormItemTimeShedule = ( props, childRef) => {....}
使用useImperativeHandle定義暴露給父組件的參數(shù)氯哮;
? useImperativeHandle(childRef,()=>(
? ? getValidateError
? }))
//執(zhí)行校驗(yàn)
const getValidateError = item => {
? ? let msg;
? ? validators.some(item => {
? ? ? ? if (!item.validator(startTime)) {
? ? ? ? ? ? msg = item.message;
? ? ? ? ? ? return true;
? ? ? ? }
? ? ? ? return false;
? ? });
? ? return msg;
};
主要還是卡在forwardRef和useImperativeHandle這里际跪,注意React版本是16以上,我是寫的函數(shù)式組件姆打。