Блог

Я создаю форму, которая будет принимать новый контакт. У меня есть выбор страны, в которой есть 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;