본문 바로가기

antd useRef current.focus

web/javascript by 낼스 2022. 6. 14.


    // const inputRef = useRef<any>({});
    // const inputRef = useRef<{[key : string] : HTMLElement|Component}>({}); 
    type RefType = { [key : string] : HTMLElement}
    const inputRef = useRef<RefType>({}); 
    const register = ((elem: any) => {
        const key = elem?.input?.id || elem?.props?.id || elem?.resizableTextArea?.props?.id;
        console.log('register', elem, key);
        return inputRef.current[key] = elem;
    });


    const msgAlert = (msg: string, id: string) => {
        // alert(msg);
        message.error(msg);
        inputRef.current[id].focus();
        inputRef.current[id].scroll();
    };

    const onSave = async () => {
        if ( !data.bidTitle ) {
            msgAlert('공고명을 입력해주세요.','bidTitle');
            return false;
        } else if (data.presentationFlag) { // 설명회개최가 : ‘예’이고, 작성완료 저장일경우아 설명회 정보가 필수 입력
            if (!data.presentationDatetime) {
                msgAlert('설명회 일시를 입력해주세요.','presentationDatetime');
                return false;
            } else if (!data.presentationLocation) {
                msgAlert('설명회 장소를 입력해주세요.','presentationLocation');
                return false;
            } else if (!data.presentationSummary) {
                msgAlert('설명회 개요를 입력해주세요.','presentationSummary');
                return false;
            } 
        }

        // TODO softm 저장시 재가공 필요.
        // data?.bidNoticeDatetime.format(dateTimeFormat)
        const res = await callRequest('/api/specRequest/insertSpecRequestRequester', data);
    };

    const handleChange = ({ target }: {
        target: HTMLInputElement | {
            name: string,
            value: moment.Moment | null | React.ChangeEvent<HTMLInputElement | RadioChangeEvent> | string | boolean
        }
    }) => {
        const { name, value } = target;
        // if (target instanceof HTMLInputElement) {
        // } else {
        // }
        // moment.isMoment(value);
        // const checked = value instanceof CheckboxChangeEvent ? value : undefined;
        console.log( name, value);
        const chgAttr:any = {};
        if ( name === 'priceRate'  && Number(value) > 100) {
            return;
        }
        // handleChange({ ...v, target:{ value : v.target.value, name: 'bidNoticeType' }}); 

        if (name === 'bidNoticeType' ) {
            chgAttr.blindFlag = ENUM_BID_NOTICE_TYPE.NOMINATION === value; //  업체명 블라인드
        }

        if (name === 'presentationFlag') {
            // if (name === 'presentationFlag') {
        }

        setData({ ...data, ...chgAttr, [name]: value });
    };
                                    <Input type={'text'} value={data.bidTitle}
                                        onChange={(v) => {
                                            handleChange({ ...v, target:{ value : v.target.value, name: 'bidTitle' }});
                                        }}
                                        ref={register}
                                        id='bidTitle'
                                    />

<DatePicker name="bidNoticeDatetime" value={data.bidNoticeDatetime}
                                        defaultOpenValue={data.bidNoticeDatetime}
                                        onChange={(v) => {
                                            handleChange({ target: { name: 'bidNoticeDatetime', value: v }});
                                        }}
                                        clearIcon={false}
                                        showTime
                                        format={dateTimeFormat.replace(/T/g, ' ')}
                                        ref={register}
                                        id='bidNoticeDatetime'
                                        />

'web > javascript' 카테고리의 다른 글

Fetch in TypeScript  (0) 2022.09.04
화면 활성화 비활성화 active deactive , visibilitychange  (0) 2022.08.19
typescript onchange moment  (0) 2022.06.12
react class componet  (0) 2022.04.04
Promise then  (0) 2021.10.01

댓글