插入电话号码时，如何使用react- phone - number -input?，validation error插入数据

Question

我正在尝试插入一个没有说“需要电话号码”的数据。我填写了电话号码字段，它是满的，但当我点击提交时，电话号码字段验证显示“电话号码必填”，尽管我在电话号码字段中插入了电话号码。

这是电话号码的验证：

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

这是我的窗口小部件号码电话：

从‘react’导入React，{useState}；

导入'react-phone-number-input/style.css'；从‘react-phone-number-input’导入PhoneInput {isValidPhoneNumber }；

             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)}