reactjs - 使用react-hook-form和Material-UI react 问题

Question

我正在尝试构建一个带有动态字段的表单(以及显示/隐藏它的开关)。我想同时使用react-hook-forms(因为它的强大功能:(1)按照我想要的方式自动填充数据结构，而无需我手动执行，以及(2)“观看”输入的功能(即立即对用户操作使用react并将其反射(reflect)在变量中)。我还想使用material-ui，因为我需要我的应用程序看起来非常现代。 根据react-hook-forms的文档，它支持UI库，material-ui就是其中之一。

但我有一个问题。对于某些类型的输入，例如material-ui的TextField，一切正常。我可以使用“watch”来代替它，效果非常好。 但对于其他一些输入，例如 Switch 或 Checkbox， watch 功能效果不佳。

例如，在这个特定的测试示例中，当我在文本字段中输入某些内容时，页面 react 良好(我也可以在控制台中看到它)， watch 显示正确的值。但是当我单击 Switch 元素时，奇怪的事情发生了。第一次它工作正常，我的动态字段出现，var isDog 设置为 true，这是可以的。但第二次，即使 isDog 值为 false，代码(条件渲染字段)的行为就好像它仍然为 true，结果是动态字段永远呈现。就像它被缓存在某个地方或者我不知道一样。这是怎么回事？

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

有人遇到同样的问题吗？这里有什么问题吗？这是一个错误吗？

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

这是codesandbox Link to codesandbox中的示例

Answer 1

与 Material-UI Switch 结合使用时，RHFInput 似乎存在一些错误。

尝试删除它并将register ref更改为inputRef

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

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

这是您的codesandBox示例。