我正在处理我的 React 表单,并且有以下代码:
import { useState } from "react";
const SignupComponent = () => {
const [values, setValues] = useState({
name: "",
email: "",
password: "",
error: "",
loading: false,
message: "",
showForm: true,
});
const { name, email, password, error, loading, message, showForm } = values;
const handleSubmit = (e) => {
e.preventDefault();
console.table({ name, email, password, error, loading, message, showForm });
};
const handleChange = (name) => (e) => {
setValues({ ...values, error: false, [name]: e.target.value });
};
const signupForm = () => {
return (
<form onSubmit={handleSubmit}>
<div className="form-group mt-3">
<input
onChange={handleChange("name")}
type="text"
className="form-control"
placeholder="Type your name"
value={name}
/>
</div>
<div className="form-group mt-3">
<input
onChange={handleChange("email")}
type="email"
className="form-control"
placeholder="Type your email"
value={email}
/>
</div>
<div className="form-group mt-3">
<input
onChange={handleChange("password")}
type="password"
className="form-control"
placeholder="Type your password"
value={password}
/>
</div>
<div className="form-group mt-3">
<div className="btn btn-primary">Signup</div>
</div>
</form>
);
};
return <>{signupForm()}</>;
};
export default SignupComponent;
当我访问我的表单并填写字段时,它实际上应该 console.log 名称、电子邮件等的值。但是,它返回以下错误:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Link`.
at NavbarBrand (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:48922:25)
at Link (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:1587:19)
at nav
at Navbar (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:48863:22)
at div
at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:8388:5)
at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:8876:24)
at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:9012:25)
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
renderReactElement @ index.tsx:524
doRender @ index.tsx:793
_callee2$ @ index.tsx:425
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ main.js?ts=1620610614705:1
react-dom.development.js:67 Warning: Expected server HTML to contain a matching <a> in <a>.
知道是什么原因导致表单没有 console.log 吗?我检查了每个表单字段。
最佳答案
会解决
Attempts to access this ref will fail. Did you mean to use React.forwardRef()
使用refs
而不是ref
import React, { useRef } from "react";
import MyComponent from "./MyComponent.js"
const MainComponent = (props) => {
const myRef = useRef();
//...
<MyComponent refs={ myRef } />
//...
关于javascript - 尝试访问此引用将失败。你的意思是使用 React.forwardRef(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67463844/