My form is working without the Phone input but I´m not sure if it´s posible to use phone input inside a form.

I don´t get error, it´s like the handleChange function is not working for the Phone Input and I can´t write anything but choosing the country.

enter image description here

        <Form onSubmit={handleSubmit}>
            <Row>
                <Col>
                    <Form.Group className="mb-3" controlId="formBasicName">
                        <Form.Label>Name</Form.Label>
                        <Form.Control type="text" placeholder="Enter name" name="Name" value={data.Name} onChange={handleChange} required />
                        <Form.Text className="text-muted">
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3" controlId="formBasicSurname">
                        <Form.Label>Surname</Form.Label>
                        <Form.Control type="text" placeholder="Enter Surname" name="Surname" value={data.Surname} onChange={handleChange} required />
                        <Form.Text className="text-muted">
                        </Form.Text>
                    </Form.Group>
                    <Form.Group className="mb-3" controlId="formBasicDateOfBirth">
                        <Form.Label>Date of Birth</Form.Label>
                        <Form.Control type="date" placeholder="Date of Birth" name="DateOfBirth" value={data.DateOfBirth} onChange={handleChange} required />
                        {errors.DateOfBirth && <p className="error">{errors.DateOfBirth}</p>}
                    </Form.Group>
                </Col>

                <Col>
                    <Form.Group className="mb-3" controlId="formBasicEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="Enter email" name="Email" value={data.Email} onChange={handleChange} required />
                        <Form.Text className="text-muted">
                        </Form.Text>
                        {errors.Email && <p className="error">{errors.Email}</p>}
                    </Form.Group>
                    
                    <Form.Group className="mb-3" controlId="formBasicPhone">
                        <Form.Label>Phone Number</Form.Label>
                        <PhoneInput
                            placeholder="Enter phone number"
                            value={data.Phone}
                            name= "Phone"
                            onChange= {handleChange}/>
                        {errors.Phone && <p className="error">{errors.Phone}</p>}
                   </Form.Group>

                </Col>
            </Row>
            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>

I have no idea why but can´t make Phone Input work for this form. This is my handle change function and the hooks:

 const [data, setData] = useState({ Name: "", Surname: "", DateOfBirth: "", Email: "", Phone: "", UniversityIds:[]})
const [errors, setErrors] = useState({});

const handleChange = ({ target }) => {
    setData({
        ...data,
        [target.name]: target.value
    })
}

CodePudding user response：

It happens, because the <PhoneInput> component likely doesn't use event as its first parameter in the onChange callback.

Try this instead:

<PhoneInput
    onChange={(value, data, event) => handleChange(event)}