如何使用 react-phone-number-input 插入數據？，插入電話號碼時出現驗證錯誤

Question

我正在嘗試插入數據而不說“需要電話號碼”。 我填寫了電話號碼字段並且它已滿但是當我單擊提交時，盡管我在電話號碼字段中插入了電話號碼，但電話號碼字段驗證顯示“需要電話號碼”。

這是電話號碼的驗證：

     if(!values.phoneNumber){
              errors.phoneNumber = 'phoneNumber required'
               }

這是我的小部件號碼電話：

從“反應”導入反應，{useState}；

導入“反應電話號碼輸入/style.css”； import PhoneInput,{isValidPhoneNumber } from 'react-phone-number-input';

             const PhoneWidget = ({

                  step,
                  precision,
                  input,
                  placeholder,
                  label,
                  theme,
                  props,
                  meta: { valid,touched, error },
                  ...rest
                  }) =>
                  {

             const [value,setValue] = useState();


                    return(
                        <div className='form-group'> 
                        <label forname={input.name}>{label}</label> <br />
                         <PhoneInput
                           value={value}
                          placeholder={!input.value ? 'Please, type a number' : input.value}
                             //ISSUE  onChange={event => OnValueChange(event)}
                                    //Problem is here. Maybe I'm not setting the value
                                    onChange= {setValue}
                                              error={value ? (isValidPhoneNumber(value) ? undefined : 
                            'Invalid phone number')    : 'Number Phone required'}
                                     className='form-control'
                                           />
                                  //Here I get the validation error.
                                 {(!valid && touched) &&
                                     <p className='help-block'>{error}</p>
                                           }
                                {/*  <div className='text-danger' style={{ marginBottom: '20px' }}>
                                         {touched && error}
                                          </div>*/      
                                       </div>

                                           )
                                        }


                export default PhoneWidget;

我無法理解。 我在電話號碼字段中輸入數據，當我在電話號碼字段已滿時單擊提交時，電話號碼字段獲取並顯示驗證錯誤顯示“需要電話號碼”。

有誰知道我可以解決這個問題嗎？

Answer 1

將onChange= {setValue}寫為 onChange={e=>setValue(e.target.value)}