React-hook-form 和 Material-UI 的 React 问题

Question

我正在尝试构建一个带有动态字段的表单（并切换到 show/hide 它）。我想同时使用 react-hook-forms（因为它的强大功能：（1）以我想要的方式自动填充数据结构，而无需我手动执行，以及（2）'watching' 的功能输入（即立即对用户操作做出反应并将其反映在变量中）。我还想使用 material-ui，因为我需要我的应用程序看起来非常现代。根据 react-hook-forms 的文档，它支持 UI 个库，material-ui 就是其中之一。

但是我有一个问题。对于某些类型的输入，例如 material-ui 的 TextField，一切正常。我可以为它使用 'watch'，它工作得很好。但对于其他一些输入，如 Switch 或 Checkbox，手表功能效果不佳。

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

我尝试在代码中使用不同的 'value'，例如"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

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

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

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

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

这是您的 codesandBox 示例。

Answer 2

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

React-hook-form 和 Material-UI 的 React 问题

React problem with react-hook-form and Material-UI

reactjs

material-ui

react-hook-form