使用反应钩子形式控制的组件，第一次按键不起作用

Question

我使用 React 钩子表单进行验证。但是我们的代码是在受控组件上实现的。我在谷歌中经历了几个使用默认值而不是值的例子。

如果我在提交表单后将值替换为默认值。表单中的值没有清除任何人都可以向我建议如何克服这个问题。

import React, { useState, useEffect } from 'react';

import { getIdToken } from '../Utils/Common';
import { useForm } from 'react-hook-form';

export default function Roles() {
  const [roleName, setroleName] = useState('');

  const { register, handleSubmit, errors } = useForm();

  const handleRoleName = (event) => {
    setroleName(event.target.value);
  };

  const handleAddRole = () => {
    /* api call here after succes i have clear role name*/
    setroleName('');
  };
}
return (
  <div className='g-pa-20'>
    <h1 className='g-font-weight-300 g-font-size-28 g-color-black g-mb-28'>
      {editaddLabel}
    </h1>
    <form noValidate onSubmit={handleSubmit(handleAddRole)}>
      <div className='row'>
        <div className='col-md-4 col-xs-12 col-sm-12'>
          <div className='g-brd-around g-brd-gray-light-v7 g-rounded-4 g-pa-15 g-pa-20--md g-mb-30'>
            <div className='mb-4'>
              <div className='form-group g-mb-30'>
                <label className='g-mb-10' for='inputGroup-1_1'>
                  Role Name
                </label>
                <div
                  className={
                    errors && roleName === ''
                      ? 'g-err-brd-primary--focus'
                      : 'g-pos-rel'
                  }
                >
                  <span className='g-pos-abs g-top-0 g-right-0 d-block g-width-40 h-100 opacity-0 g-opacity-1--success'>
                    <i
                      className='hs-admin-check g-absolute-centered g-font-size-default g-color-secondary'
                      on
                    ></i>
                  </span>
                  <input
                    id='inputGroup-1_1'
                    className='form-control form-control-md g-brd-gray-light-v7 g-brd-gray-light-v3--focus g-rounded-4 g-px-14 g-py-10'
                    type='text'
                    placeholder=''
                    onChange={handleRoleName}
                    value={roleName}
                    name='role'
                    ref={register({
                      required: true,
                    })}
                  />
                </div>
                {errors.role && errors.role.type === 'required' && (
                  <p className='plans-single-error'> Role name is required.</p>
                )}
              </div>
            </div>
            <div className='from-group'>
              <div className='form-row pull-right'>
                <div className='form-group col-xs-6'>
                  <button
                    className='btn btn-md btn-xl--md u-btn-primary g-font-size-12 g-font-size-default--md g-mr-10 g-mb-10'
                    disabled={loading}
                  >
                    {loading && (
                      <i className='fas fa-spinner fa-spin spinner'></i>
                    )}
                    Save
                  </button>
                </div>
                <div className='form-group col-xs-6'>
                  <button
                    className='btn btn-md btn-xl--md u-btn-outline-gray-dark-v6 g-font-size-12 g-font-size-default--md g-mb-10'
                    onClick={cancelClick}
                  >
                    Cancel
                  </button>
                </div>
              </div>
            </div>

            <div className='from-group'>
              <label></label>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
);