मैं inputComponent प्रोप के रूप में प्रतिक्रिया-फोन-नंबर-इनपुट से PhoneInput घटक के लिए एक सामग्री UI TextField घटक की आपूर्ति करना चाहता हूं।

हालांकि, मैं रेफरी को सफलतापूर्वक लागू करने में सक्षम नहीं प्रतीत होता। हालांकि मैं सामग्री यूआई टेक्स्टफिल्ड घटक को यूआई को प्रस्तुत करता हूं और राज्य को मूल्य के साथ सफलतापूर्वक अपडेट किया जाता है, यह पहला मान टाइप किए जाने के बाद फोकस खो देता है।

import React, { forwardRef, createRef } from 'react';
import { TextField } from '@material-ui/core';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';

const SampleComponent = ({ handleChange }) => {

const phoneInput = forwardRef((props, ref) => {

return (
  <TextField
    inputRef={ref}
    fullWidth
    label="Phone Number"
    variant="outlined"
    name="phone"
    onChange={handleChange}
  />
  );
});

const ref = createRef();
return (
    <PhoneInput ref={ref} inputComponent={phoneInput} />
   );
  };
6
insivika 29 मार्च 2020, 06:21
क्या उस पोस्ट ने आपकी समस्या का समाधान किया? कृपया कुछ प्रतिक्रिया दें सराहना की जाएगी। देखें जब कोई मेरे प्रश्न का उत्तर देता है तो मुझे क्या करना चाहिए?
 – 
keikai
31 मार्च 2020, 19:35
नमस्ते! क्या आप कभी इसका पता लगा पाए? मैं इस समय वही कोशिश कर रहा हूं। धन्यवाद!
 – 
grigs
22 मई 2020, 00:19
एक हेड-अप के रूप में, मेरे पास इसके लिए एक पैकेज है। npmjs.com/package/material-ui-phone-number
 – 
Alex Plumb
23 सितंबर 2021, 05:39

1 उत्तर

सबसे बढ़िया उत्तर

तो मैं इसे निम्न विधि का उपयोग करके काम करने में सक्षम था। इसे कैसे सुधारें इस पर कोई सुझाव स्वागत से अधिक है।

मेरे पास PhoneNumber.jsx नाम की एक अलग फ़ाइल है

import { forwardRef } from 'react'
import TextField from '@material-ui/core/TextField'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  input: {
    backgroundColor: '#fff'
  }
}))

const phoneInput = (props, ref) => {
  const classes = useStyles()

  return (

    <TextField
      {...props}
      InputProps={{
        className: classes.input
      }}
      inputRef={ref}
      fullWidth
      size='small'
      label='Phone Number'
      variant='outlined'
      name='phone'
    />
  )
}
export default forwardRef(phoneInput)

और मेरी फॉर्म फ़ाइल:

import PhoneInput from 'react-phone-number-input'
import CustomPhoneNumber from '../components/prebuilt/PhoneNumber'
...
<PhoneInput
   placeholder='Enter phone number'
   value={phone}
   onChange={setPhone}
   inputComponent={CustomPhoneNumber}
/>
...
11
grigs 22 मई 2020, 23:04