#javascript #reactjs
Вопрос:
Я создаю форму, которая будет принимать новый контакт. У меня есть выбор страны, в которой есть 4 варианта. Каждая страна должна соответствовать коду вызова страны внутри ввода в той же форме. У меня есть небольшая проблема с выяснением этого. Мне нужно только четыре страны, чтобы данные могли быть фиктивными
Вот мой компонент
import React, { Fragment, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
import { Button, CustomInput, Form, FormGroup, Input, Label } from 'reactstrap';
import Divider from '../common/Divider';
import useFakeFetch from '../../hooks/useFakeFetch';
import EventCreateSelect from '../event/EventCreateSelect';
import { isIterableArray } from '../../helpers/utils';
import 'react-phone-number-input/style.css';
import PhoneInput, { getCountries, getCountryCallingCode, parsePhoneNumber } from 'react-phone-number-input';
import axios from 'axios'
import countries from '../../data/billing/smscountries';
import rawCustomTags from '../../data/event/eventTags';
const ContactForm = ({ hasLabel }) => {
const { loading: loadingCustomTags, data: eventTags } = useFakeFetch(rawCustomTags);
// State
const [eventTag, setEventTag] = useState([]);
const [Value, setValue ] = useState('')
const [showContactModal, setShowContactModal ] = useState(false)
const [createContact, setCreateContact] = useState({
phoneNumber: '',
country: 'US',
phoneType: 'mobile',
group: '',
firstName: '',
lastName: '',
company: '',
email: '',
error: '',
open: false})
const [isAccepted, setIsAccepted] = useState(false);
const [isDisabled, setIsDisabled] = useState(true);
// Handler
const handleSubmit = e => {
e.preventDefault()
console.log(createContact)
axios({
url:"http://localhost:5000/contacts/create",
method:"POST",
data: createContact,
withCredentials: true
})
.then((response) => {
if(response.error) {
setCreateContact({...createContact, error: response.error})
} else {
setCreateContact({...createContact, error: ''})
toast.success(`Successfully saved your contact`);
}
})
};
const handleChange = e => {
setCreateContact({...createContact, [e.target.name]: e.target.value})
console.log(createContact)
};
// the array are dependencies that trigger the function setREdirectUrl. good to know
useEffect(() => {
setIsDisabled( !createContact.phoneNumber || !createContact.country || !createContact.phoneType);
}, [createContact.phoneNumber, createContact.country, createContact.phoneType ]);
return (
<>
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label>Enter a Number</Label>
<Input
// this input here I would like to prepend with the corresponding country code from the
select option in the next formGroup
placeholder={<Label>{createContact.country}</Label>}
name="phoneNumber"
value={createContact.phoneNumber.value}
onChange={handleChange}
type='input'
/>
</FormGroup>
<div>
<FormGroup>
<Label
>Country</Label>
<Input
placeholder={!hasLabel ? 'Select a country' : 'US'}
name="country"
value={createContact.country.value}
onChange={handleChange}
type='select'>
<option value="US">United States</option>
<option value="MX">Mexico</option>
<option value="FR">France</option>
<option value="CA">Canada</option>
</Input>
</FormGroup>
</div>
<div>
<FormGroup>
<Label>Phone type</Label>
<Input
placeholder={!hasLabel ? 'landline or mobile' : ''}
name="phoneType"
value={createContact.phoneType.value}
onChange={handleChange}
type='select'>
<option value="mobile">Mobile</option>
<option value="landline">Landline</option>
</Input>
</FormGroup>
</div>
<div>
<FormGroup>
<Label>First Name</Label>
<Input
placeholder={!hasLabel ? 'First Name' : ''}
name="firstName"
value={createContact.firstName.value}
onChange={handleChange}
type='input'
/>
</FormGroup>
</div>
<div>
<FormGroup>
<Label>Last Name</Label>
<Input
placeholder={!hasLabel ? 'Last Name' : ''}
name="lastName"
value={createContact.lastName.value}
onChange={handleChange}
type='input'
/>
</FormGroup>
</div>
<div>
<FormGroup>
<Label>Company</Label>
<Input
placeholder={!hasLabel ? 'Company' : ''}
name="company"
value={createContact.company.value}
onChange={handleChange}
type='input'
/>
</FormGroup>
</div>
<div>
<FormGroup>
<Label>Email</Label>
<Input
placeholder={!hasLabel ? 'Email' : ''}
name="email"
value={createContact.email.value}
onChange={handleChange}
type='email'
/>
</FormGroup>
</div>
<Divider className="mt-4">save this contact</Divider>
<FormGroup>
<Button block type="submit" onClick={handleSubmit}>Save</Button>
</FormGroup>
</Form>
</>
);
};
ContactForm.propTypes = {
hasLabel: PropTypes.bool
};
ContactForm.defaultProps = {
layout: 'basic',
hasLabel: false
};
export default ContactForm;