我正在尝试对我的表单进行验证以做出反应。我选择了“react-hook-form”库。但我不断收到错误“Path.split 不是函数。即使在使用他们网站上给出的默认示例后，我也遇到了同样的错误。这是官方网站中给出的默认代码。
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example")); // watch input value by passing the name of it
return (
{/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input name="example" defaultValue="test" ref={register} />
{/* include validation with required …我正在创建一个页面供用户使用 React-Hook-Form 更新个人数据。加载 paged 后，我使用useEffect获取用户当前的个人数据并将它们设置为表单的默认值。
我将获取的值放入defaultValueof <Controller />。但是，它只是没有显示在文本框中。这是我的代码：
import React, {useState, useEffect, useCallback} from 'react';
import { useForm, Controller } from 'react-hook-form'
import { URL } from '../constants';
const UpdateUserData = props => {
const [userData, setUserData] = useState(null);
const { handleSubmit, control} = useForm({mode: 'onBlur'});
const fetchUserData = useCallback(async account => {
const userData = await fetch(`${URL}/user/${account}`)
.then(res=> res.json());
console.log(userData);
setUserData(userData);
}, []);
useEffect(() => {
const account = localStorage.getItem('account');
fetchUserData(account);
}, [fetchUserData])
const …我有一个表单（抱歉太长了），用户输入姓名、电子邮件、电话、评论非常简单：
<form
className={classes.root}
data-testid="getting-started-form"
onSubmit={handleSubmit(onSubmit)}
>
<div style={{ width: '400px' }}>
<div style={{ width: '100%'}}>
<Controller as={<TextField
label="Name"
id="name"
name="name"
type="text"
value={name}
placeholder="Name"
onChange={(e: React.FormEvent<EventTarget>) => {
let target = e.target as HTMLInputElement;
setName(target.value);
}}
inputProps={{
'data-testid': 'name'
}}
/>} name="name" rules={{ required: true }} control={control}
/>
{errors.name && <span>Name is required</span>}
</div>
<div style={{ width: '100%' }}>
<Controller as={<TextField
label="Email"
id="email"
name="email"
type="text"
value={email}
placeholder="Email"
style={{ width: '100%' }}
onChange={(e: React.FormEvent<EventTarget>) => {
let target = e.target as HTMLInputElement; …我在我的项目中使用 react-hook-form 并且我有 2 个完全独立的表单，但是当我提交其中一个表单时，如果需要另一个表单中的某些字段，我无法提交当前表单，请查看演示，并尝试提交其中一个表单，这些表单应该彼此独立工作，但看起来它们相互依赖。
有什么帮助吗？
我用react-hook-form创建了一个表单。它在控制台中正确记录“fullName”和“city”，但不记录单选按钮。使用单选按钮，您会得到结果“null”。
我的代码如下。
import React from 'react'
import './App.css';
import {useForm} from "react-hook-form";
function App() {
const {register, handleSubmit} = useForm();
function onSubmitButton(data) {
console.log(data)
}
return (
<>
<h1>Order weather</h1>
<form onSubmit={handleSubmit(onSubmitButton)}>
<input
{...register("fullName")}
type="text"
name="fullName"
placeholder="Name and surname"
id="name"
/>
<input
{...register("city")}
type="text"
name="city"
placeholder="City"
id="city"
/>
<p>I would like to:</p>
<label htmlFor="field-rain">
<input
{...register("rain")}
type="radio"
name="weather"
value="rain"
id="field-rain"
/>
Rain
</label>
<label htmlFor="field-wind">
<input
{...register("wind")}
type="radio"
name="weather"
value="wind"
id="field-wind"
/>
Lots of wind
</label>
<label htmlFor="field-sun">
<input
{...register("sun")} …当我将nextjs升级到版本 12并运行时，yarn devreact-hook-form 库中出现问题：
语法错误：未找到命名导出“集”。请求的模块react-hook-form是一个CommonJS模块，它可能不支持所有module.exports作为命名导出。CommonJS 模块始终可以通过默认导出导入，例如使用 ....
谁能帮我修复这个错误？
我有一个包含多个组件的表单（每个组件都是基于功能或基于类的组件），其中包含多个输入字段或单选按钮。当我提交表单时，我要么想要提交嵌套在组件中的字段以及表单数据，要么我应该能够提取字段数据然后提交它们（不确定哪种方法是最好的，为什么？）。我怎样才能实现这个目标？
代码 ：
import React from "react";
import { useForm } from "react-hook-form";
export default function TestComponent() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="name">Name</label>
<input type="text" id="name" name="name" ref={register({ required: true, maxLength: 30 })} />
{errors.name && errors.name.type === "required" && <span>This is required</span>}
{errors.name && errors.name.type === "maxLength" && <span>Max length exceeded</span> }
<NestedComponent1 />
<NestedComponent2 />
<input type="submit" />
</form>
);
}
function NestedComponent1() …import React, { useState } from "react";\nimport FileBase64 from "react-file-base64";\nimport { useDispatch } from "react-redux";\nimport { makeStyles } from "@material-ui/core/styles";\nimport { TextField, Select, Input, MenuItem, Button } from "@material-ui/core";\nimport { useForm, Controller } from "react-hook-form";\nimport { yupResolver } from "@hookform/resolvers/yup";\nimport * as yup from "yup";\nimport { updatePost } from "../actions/post";\n\nconst useStyles = makeStyles((theme) => ({\n textField: {\n marginBottom: theme.spacing(2),\n },\n buttons: {\n marginTop: theme.spacing(2),\n },\n}));\n\nconst tags = ["fun", "programming", "health", "science"];\n\nconst postSchema = yup.object().shape({\n title: yup.string().required(),\n subtitle: yup.string().required(),\n content: yup.string().min(20).required(),\n …是否可以将 react-datepicker 与 react hooks 形式一起使用？我尝试了以下示例：
https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark
但没有运气。
import React, { useState } from "react";
import "./styles.css";
import { useForm } from "react-hook-form";
import { Row, Col, Form, FormGroup, Label, Input, Button } from "reactstrap";
import DatePicker from "react-datepicker";
export default function App() {
const { register, handleSubmit } = useForm();
const [startDate, setStartDate] = useState();
const [result, setResult] = useState();
const onSearch = event => {
setResult(event);
};
return (
<div className="App">
<Form onSubmit={handleSubmit(onSearch)}>
<Row>
<Col>
<FormGroup>
<Input
type="number" …你能告诉我为什么我收到错误“一个组件正在改变一个不受控制的自动完成来控制。元素不应该从不受控制切换到受控制（反之亦然）。决定在整个生命周期内使用受控制或不受控制的自动完成元素组件。”
成分 ：
function AutoComplete(props) {
const defaultProps = {
options: props.options,
getOptionLabel: option => option.name,
};
const handleChange = (e, value) => {
props.onChange(value);
};
return (
<Autocomplete
{...defaultProps}
renderInput={params => (
<TextField {...params} label={props.label} margin="normal" />
)}
onChange={handleChange}
value={props.value}
/>
);
}
调用自动完成：
<Controller
control={control}
name = 'country'
as = {
<AutoComplete
options={countryOptions}
onChange={selectCountryHandler}
label="Country"
value={selectedCountry || ''}
/>
} />
我该如何解决这个错误？
react-hook-form ×10
reactjs ×7
javascript ×4
material-ui ×3
autocomplete ×1
controller ×1
forms ×1
nested ×1
next.js ×1
radio-button ×1
react-hooks ×1