Question

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

但是我有一个问题。对于某些输入，例如material-ui的TextField，一切正常。我可以使用“手表”，它可以完美运行。但是对于其他一些输入（如“开关”或“复选框”），监视功能无法正常运行。

例如，在这个特定的测试示例中，当我在TextField中键入某些内容时，页面反应良好（我也可以在控制台中看到它），手表显示正确的值。但是，当我单击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);

以下是codeandbox Link to codesandbox

中的示例

Answer 1

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

尝试将其删除，并将register的引用更改为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

2 个答案: