Question

由于某些原因，我的组件在第一次本地状态更改时会闪烁（例如，如果我切换复选框或聚焦并模糊了输入字段），我无法弄清楚是什么原因引起的。在其他具有复选框/输入的页面上，我也遇到此问题。另外，我的react-hook-form onChange验证仅在我至少聚焦和模糊一次后才开始起作用。

const MyAccount = ({ handleFormSubmit }) => {
  
  const [isNoSmartphoneChecked, setNoSmartphoneChecked] = useState(false)
  const [isPhoneNumberAnonymousChecked, setPhoneNumberAnonymousChecked] = useState(false)

  const {
    handleSubmit,
    register,
    errors,
    control,
    setValue,
    clearErrors,
    formState: { isSubmitting, touched },
  } = useForm<FormData>({
    defaultValues: {
      phoneNumber: null,
      noSmartphone: false,
      phoneNumberAnonymous: false,
      logoChanged: false,
    },
    mode: 'onChange',
  })

  const onSubmit = handleSubmit((values) => {
    // handleFormSubmit(values)
  })


  const handleToggleNoSmartphoneCheckbox = () => {
    setNoSmartphoneChecked(!isNoSmartphoneChecked)
    setValue('noSmartphone', !isNoSmartphoneChecked)
    clearErrors(['phoneNumber'])
  }
  const handleToggleAnonymousNumberCheckbox = () => {
    setPhoneNumberAnonymousChecked(!isPhoneNumberAnonymousChecked)
    setValue('phoneNumberAnonymous', !isPhoneNumberAnonymousChecked)
  }

  const isContinueButtonActive = (errors && !errors.phoneNumber && touched.phoneNumber) || isNoSmartphoneChecked

  return (
    <MyAccountWrapper>

      <UserInfo>
        <Form>
          <FormItem hasError={errors && !!errors.phoneNumber && !isNoSmartphoneChecked}>
            <Label>Your mobile phone number</Label>
            <Controller
              name="phoneNumber"
              control={control}
              rules={{ required: !isNoSmartphoneChecked }} //if noSmartphone isn't checked phone number required
              as={<PhoneInput placeholder={''} autoFormat={false} />}
            />
          </FormItem>
          <FormItem>
            <CustomCheckbox
              isChecked={isNoSmartphoneChecked}
              handleToggleCheckbox={handleToggleNoSmartphoneCheckbox}
              label="I do not have a smartphone (that works) "
              register={register}
              name="noSmartphone"
            />
          </FormItem>
          <FormItem>
            <CustomCheckbox
              isChecked={isPhoneNumberAnonymousChecked}
              handleToggleCheckbox={handleToggleAnonymousNumberCheckbox}
              label="I do not want to share my phone with my employer"
              register={register}
              name="phoneNumberAnonymous"
            />
          </FormItem>
        </Form>
        <ButtonWrapper>
          {isContinueButtonActive && !isSubmitting ? <ActiveBtn onClick={onSubmit} /> : <DisabledBtn />}
        </ButtonWrapper>
      </UserInfo>
    </MyAccountWrapper>
  )
}

export default MyAccount

Answer 1

由https://github.com/styled-components/styled-components/issues/2205#issuecomment-438844490

解决

此问题是通过将@ font-face与createGlobalStyle一起使用引起的。要暂时解决此问题，我已将字体导入移至CSS文件。

@font-face {
  font-family: 'Muli';
  src: url('../fonts/Muli/Muli-Regular.ttf');
}

@font-face {
  font-family: 'MuliBold';
  src: url('../fonts/Muli/Muli-Bold.ttf');
}

在本地状态的首次更改时反应组件闪烁

1 个答案: