Блог

Я пытаюсь проверить форму с несколькими входами и номером ssn, где формат xxx-xx-xxxx в 3 разных входах.Я пытаюсь проверить,должно ли число в каждом вводе быть 3,2,4, и оно должно принимать только числа для ssnid и идентификатора ссылки, но для имени, фамилии оно может принимать как числа, так и алфавиты.При передаче второго параметра в handlechange я проверяю, имеет ли он значение >=1, затем он может проверить, меньше ли его число и количество.Но его значения отображаются как [объект,объект] в пользовательском интерфейсе, когда я пытаюсь ввести значение.

 type searchFields = {
    ssn1: string;
    ssn2: string;
    ssn3: string;
    ssnId: string;
    referenceNumber: string;
    lastName: string;
    firstName: string;
}


export default function Search() {
    let history = useHistory();
    const [status, setStatus] = useState('All');
    const [showWarning, setShowWarning] = useState(false);
    const [values, setValues] = useState<searchFields>({
        ssn1: '',
        ssn2: '',
        ssn3: '',
        ssnId: '',
        referenceNumber: '',
        lastName: '',
        firstName: '',
    });


const handleChange = (fieldName: keyof searchFields, count:number) => (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
    ) => {
        if(count >=1)   
        setValues({...values, [fieldName]: e.currentTarget.value.length <= count amp;amp; !isNaN(Number(e.currentTarget.value)) })
        else    
        setValues({ ...values, [fieldName]: e.currentTarget.value });
    };


<Grid container spacing={2}>
                                            <Grid item xs={4} sm={4}>
                                                <TextField
                                                    className="ssn1"
                                                    variant="outlined"
                                                    value={values.ssn1}
                                                    onChange={handleChange("ssn1",3)}
                                                />
                                            </Grid>
                                            <Grid item xs={3} sm={3}>
                                                <TextField
                                                    className="ssn2"
                                                    variant="outlined"
                                                    value={values.ssn2}
                                                    onChange={handleChange("ssn2",2)}
                                                />
                                            </Grid>
                                            <Grid item xs={5} sm={5}>
                                                <TextField
                                                    className="ssn3"
                                                    variant="outlined"
                                                    value={values.ssn3}
                                                    onChange={handleChange("ssn3",4)}
                                                />
                                            </Grid>
                                        </Grid>
                                    </div>
                                </Grid>
                                <Grid className="employee-search-form-label subscriber-id">
                                    <p className="form-label-main">{variables.subscriberId}</p>
                                    <TextField
                                        variant="outlined"
                                        fullWidth
                                        value={values.referenceNumber}
                                        onChange={handleChange("referenceNumber",0)}
                                    />
                                    <p className="form-label-sub">(9 characters in length including letters and numbers)</p>
                                </Grid>
 <Grid className="employee-search-form-label">
                                    <p className="form-label-main">{variables.subscriberId}</p>
                                    <TextField
                                        variant="outlined"
                                        fullWidth
                                        value={values.firstName}
                                        onChange={handleChange("firstName",0)}
                                    />
                                </Grid>
 </Grid>
 <Grid className="employee-search-form-label">
                                    <p className="form-label-main">{variables.subscriberId}</p>
                                    <TextField
                                        variant="outlined"
                                        fullWidth
                                        value={values.lastName}
                                        onChange={handleChange("lastName",0)}
                                    />
                                </Grid>