I am trying to construct a form with a dynamic field (and a switch to show/hide it). I want to use both react-hook-forms (for its great features: (1) automatically populate the data structure in the way I want, without me having to do it manually, and (2) the feature of 'watching' input (i.e. reacting to user actions immediately and reflecting this in a variable). I also want to use material-ui, because I need my app to look really modern.
According to documentation of react-hook-forms it supports UI libraries, and material-ui is one of them.

我正在尝试构造一个具有动态字段(以及显示/隐藏它的开关)的表单。我想使用两种反应挂钩表单(因为它的伟大功能：(1)以我想要的方式自动填充数据结构，而不必手动操作，以及(2)“监视”输入的功能(即立即对用户操作做出反应，并将其反映在变量中)。我还想使用Material-UI，因为我需要我的应用程序看起来真的很现代。根据Reaction-Hook-Forms的文档，它支持UI库，而Material-UI就是其中之一。

But I have a problem. For some kind of inputs, like material-ui's TextField, everything works fine. I can use 'watch' for it, it works perfectly.
But for some others inputs, like Switch or Checkbox, the watch feature doesn't work well.

但我有个问题。对于某些类型的输入，比如MATERIAL-UI的Textfield，一切都很正常。我可以用“手表”来代替它，它工作得很好。但对于其他一些输入，如Switch或CheckBox，手表功能不能很好地工作。

For example, in this particular test example, the page reacts well when I type something in the TextField (I can see it also in console), the watch displays correct value. But when I click the Switch element, something strange happens. The first time it works OK, my dynamic field appears, var isDog is set to true which is OK. But for the second time even though isDog value is false the code (the conditional rendered field) behave as if it was still true, and the result is that the dynamic field is rendered forever. Like it was cached somewhere or I don't know. What is going on here?

例如，在这个特定的测试示例中，当我在Textfield中键入内容时，页面反应良好(我也可以在控制台中看到它)，手表显示正确的值。但当我单击Switch元素时，奇怪的事情发生了。当它第一次正常工作时，我的动态字段出现，var isDog被设置为True，这是OK。但是对于第二次，即使isDog值为假，代码(条件呈现的字段)的行为就好像它仍然是真的一样，结果是永远呈现动态字段。好像它被藏在什么地方了，或者我不知道。这里发生什么事情？

I tried using different 'value' in the code, e.g. "true", or place the value attribute in RFHInput itself, rather than in Switch (controlled by FormControlLabel), but nothing helps.

我尝试在代码中使用不同的‘Value’，例如“true”，或者将Value属性放在RFHInput本身中，而不是Switch中(由FormControlLabel控制)，但都没有用。

Anyone had the same problem? What is wrong here? Is this a bug?

有谁有同样的问题吗？这里出了什么问题？这是个窃听器吗？

import React from "react";
import { useForm } from 'react-hook-form'
import Switch from '@material-ui/core/Switch';
import TextField from '@material-ui/core/TextField';
import { RHFInput } from 'react-hook-form-input';
import Button from '@material-ui/core/Button';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import ReactDOM from 'react-dom';

export default function App() {
   const { register, handleSubmit, watch, setValue } = useForm()

   const onSubmit = data => {
      console.log(data)
   }
   var isDog = watch("dog", false)
   var nameOfPet = watch("petname", "noname")
   console.log("isDog = " + isDog)  
   console.log("nameOfPet = " + nameOfPet)  
   return (
      <form onSubmit={handleSubmit(onSubmit)}>

         <RHFInput as={<TextField variant="outlined" margin="normal" required fullWidth label="name of your pet" autoFocus />}
               register={register} setValue={setValue} name="petname" />
         <RHFInput as={<FormControlLabel control={<Switch value={!isDog} />} label="dog" />}
            register={register} setValue={setValue} name="dog" />             

         <h2>Name of your pet is "{nameOfPet}" </h2>
         {isDog && (<RHFInput as={<TextField variant="outlined" margin="normal" required fullWidth label="how many legs does your dog have?" autoFocus />}
               register={register} setValue={setValue} name="petname" />)}
         {/* {!isDog && (<h1>It is not a dog!</h1>)} */}
         <Button type="submit" fullWidth variant="contained" color="primary" > Submit </Button>

       </form>
   );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the example in codesandbox Link to codesandbox

以下是codesandbox中的示例链接到codesandbox

It seems that RHFInput have some bugs when combined with Material-UI Switch.

似乎RHFInput在与Material-UI开关结合时有一些错误。

Try to remove it and change the register ref to inputRef

尝试删除它并将寄存器引用更改为inputRef

<FormControlLabel
  control={<Switch inputRef={register} name="dog" />}
  label="dog" 
/>

Also, please note you have to change the second input name in order to get its value.

另外，请注意，您必须更改第二个输入名称才能获得它的值。

Here is your codesandBox example.

这是你的codesandBox示例。

<FormControlLabel
  control={<Switch onChange={register('active').onChange}
                inputRef={register('active').ref}
 />}
  label="dog" 
/>

The ideal solution is to spread the register from the react hook forms

理想的解决方案是将寄存器从Reaction钩子形式展开

<FormControlLabel
  control={<Switch />}
  {...register('dog')}
  label="dog" 
/>

You will get the register from the useForm from the react-hook-form package

您将从Reaction-Hook-Form包的useForm中获得注册表