我正在嘗試創建一個可以以任何形式使用的自定義鉤子，但我有一個問題，我不確定它是什么。每當我開始輸入欄位時，它就會失去焦點，再次輸入時，您必須單擊它，然后繼續這樣。這不好，如果有人能幫我解決這個錯誤，我將不勝感激。
使用Form.js
import { useState } from "react";
const useForm = () => {
const [values, setValues] = useState({
// contact form
});
const [errors, seterrors] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
// console.log(name, value);
};
const validate = (data) => {};
const handleSubmit = (e) => {
e.preventDefault();
// console.log(e);
};
// console.log(values);
return {
handleChange,
values,
handleSubmit
};
};
export default useForm;
表單.js
import InputGroup from "./InputGroup";
import useForm from "./useForm";
const Form = () => {
const fields = [
{
label: "First Name",
className: "input-group",
name: "firstName",
placeholder: "John",
type: "text"
},
{
label: "Last Name",
className: "input-group",
name: "lastName",
placeholder: "Doe",
type: "text"
},
{
label: "Email",
className: "input-group",
name: "email",
placeholder: "[email protected]",
type: "email"
},
{
label: "Phone Number",
className: "input-group",
name: "Phone",
placeholder: " 234 (0)81 234 5678",
type: "text"
// pattern: "/^[ ]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-s./0-9]*$/g"
},
{
label: "Comments",
className: "input-group",
name: "comment",
placeholder: "Message",
type: "textarea"
}
];
const { values, handleChange, handleSubmit } = useForm();
//funtion to generate id based on fields lenght
const id = () => {
const head = Date.now.toString(36);
const tail = Math.random().toString(36).substr(2);
return head tail;
};
console.log(id);
return (
<form onSubmit={handleSubmit}>
{fields.map((field) => (
<InputGroup
key={id}
value={values}
onChange={handleChange}
{...field}
/>
))}
<button>submit</button>
</form>
);
};
export default Form;
輸入
const Input = ({ ...props }) => {
return <input {...props} />;
};
export default Input;
uj5u.com熱心網友回復：
你沒有id正確使用你的函式，你只是參考它，而不是呼叫它，改變 -
<InputGroup
key={id}
到
<InputGroup
key={id()}
或者更好的是，一個更好的名字，使用動詞會更容易突出問題，因為它現在看起來像一個函式而不是一個變數
<InputGroup
key={buildId()}
或其他什么，但更好的是，您應該為鍵使用靜態唯一值（即唯一但不會在渲染之間更改，因此使用時間戳是一個壞主意），因此您可以為每個鍵添加唯一 IDfield并使用它 -
const fields = [
{
id: <some unique ID>, <!---- here
label: "First Name",
className: "input-group",
name: "firstName",
placeholder: "John",
type: "text"
}
...
]
...
<InputGroup
key={field.id}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359957.html
標籤：javascript 反应 反应钩子
上一篇：錯誤：錯誤的引數：第一個引數應該是一個字串，第二個應該是一個字串陣列
下一篇：如何使用var和api制作轉換器