1

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

但我有一个问题。对于某种输入，例如 material-ui 的 TextField，一切正常。我可以使用“手表”，它工作得很好。但是对于其他一些输入，例如 Switch 或 Checkbox，监视功能无法正常工作。

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

我尝试在代码中使用不同的“值”，例如“true”，或者将值属性放在 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中的示例链接到codesandbox

4

2 回答 2

3

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

尝试删除它并将registerref 更改为inputRef

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

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

这是您的代码和框示例。

于 2019-12-28T14:29:53.663 回答
0 
<FormControlLabel
  control={<Switch onChange={register('active').onChange}
                inputRef={register('active').ref}
 />}
  label="dog" 
/>
于 2021-05-11T17:12:04.070 回答