Javascript 如何使用自定义挂钩适当地处理React中的字段更改事件？
我目前正在构建一个简单的注册表单页面，以建立我对React Web应用程序的了解。我有许多不同类型的表单元素。当我使用自定义钩子处理非简单文本字段的任何表单字段中的更改时，我遇到了以下错误 TypeError:无法读取未定义的属性“name” （匿名函数） C:/Users/paris/Desktop/covidsocial/frontend/src/libs/hooksLib.js:11 功能（事件）{ 每当我从region and country selector（地区和国家选择器）下拉列表或date picker（日期选择器）中选择一个国家时，就会出现上述错误消息。我尝试使用name和control id元素作为id，但仍然会收到与上述相同的错误消息。我认为问题在于如何设置我的值，但我对反应非常陌生，并且在pinn中遇到问题详细记录正在发生的事情。任何帮助都将不胜感激！ 下面是我的Signup.js类以及自定义react钩子的相关代码 hookslib.jsJavascript 如何使用自定义挂钩适当地处理React中的字段更改事件？,javascript,reactjs,jsx,Javascript,Reactjs,Jsx,我目前正在构建一个简单的注册表单页面，以建立我对React Web应用程序的了解。我有许多不同类型的表单元素。当我使用自定义钩子处理非简单文本字段的任何表单字段中的更改时，我遇到了以下错误 TypeError:无法读取未定义的属性“name” （匿名函数） C:/Users/paris/Desktop/covidsocial/frontend/src/libs/hooksLib.js:11 功能（事件）{ 每当我从region and country selector（地区和国家选择器）下拉列表
import { useState } from "react";
export function useFormFields(initialState) {
const [fields, setValues] = useState(initialState);
return [
fields,
function(event) {
setValues({
...fields,
[event.target.name]: event.target.value
});
}
];
}
export default function Signup() {
const [fields, handleFieldChange] = useFormFields({
email: "",
password: "",
confirmPassword: "",
confirmationCode: "",
gender: "",
onList: false,
dateOfBirth: "",
mailingAddressLine1: "",
mailingAddressLine2: "",
mailingAddressCity: "",
mailingAddressState: "",
mailingAddressZip: "",
billingAddressLine1: "",
billingAddressLine2: "",
billingAddressCity: "",
billingAddressState: "",
billingAddressZip: "",
useShippingAsBilling: false,
});
const history = useHistory();
const [newUser, setNewUser] = useState(null);
const { userHasAuthenticated } = useAppContext();
const [isLoading, setIsLoading] = useState(false);
function validateForm() {
return (
fields.email.length > 0 &&
fields.password.length > 0 &&
fields.password === fields.confirmPassword
);
}
function validateConfirmationForm() {
return fields.confirmationCode.length > 0;
}
async function handleSubmit(event) {
event.preventDefault();
setIsLoading(true);
try {
const newUser = await Auth.signUp({
username: fields.email,
password: fields.password,
confirmPassword: fields.confirmPassword,
gender: fields.gender,
firstName: fields.firstName,
lastName: fields.lastName,
onList: fields.onList,
dateOfBirth: fields.dateOfBirth,
mailingAddressLine1: fields.mailingAddressLine1,
mailingAddressLine2: fields.mailingAddressLine2,
mailingAddressCity: fields.mailingAddressCity,
mailingAddressState: fields.mailingAddressState,
mailingAddressZip: fields.mailingAddressZip,
mailingAddressCountry: fields.mailingAddressCountry,
billingAddressCountry: fields.billingAddressCountry,
billingAddressLine1: fields.billingAddressLine1,
billingAddressLine2: fields.billingAddressLine2,
billingAddressCity: fields.billingAddressCity,
billingAddressState: fields.billingAddressState,
billingAddressZip: fields.billingAddressZip,
});
setIsLoading(false);
setNewUser(newUser);
} catch (e) {
onError(e);
setIsLoading(false);
}
}
async function handleConfirmationSubmit(event) {
event.preventDefault();
setIsLoading(true);
try {
await Auth.confirmSignUp(fields.email, fields.confirmationCode);
await Auth.signIn(fields.email, fields.password);
userHasAuthenticated(true);
history.push("/");
} catch (e) {
onError(e);
setIsLoading(false);
}
}
function renderConfirmationForm() {
return (
<form onSubmit={handleConfirmationSubmit}>
<FormGroup controlId="confirmationCode" bsSize="large">
<ControlLabel>Confirmation Code</ControlLabel>
<FormControl
autoFocus
type="tel"
onChange={handleFieldChange}
value={fields.confirmationCode}
/>
<HelpBlock>Please check your email for the code.</HelpBlock>
</FormGroup>
<LoaderButton
block
type="submit"
bsSize="large"
isLoading={isLoading}
disabled={!validateConfirmationForm()}
>
Verify
</LoaderButton>
</form>
);
}
function renderForm() {
return (
<form onSubmit={handleSubmit}>
<FormGroup controlId="email" bsSize="large">
<ControlLabel>Email</ControlLabel>
<FormControl
autoFocus
name = "email"
type="email"
value={fields.email}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
type="password"
name = "password"
value={fields.password}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="confirmPassword" bsSize="large">
<ControlLabel>Confirm Password</ControlLabel>
<FormControl
type="password"
name = "confirmPassword"
onChange={handleFieldChange}
value={fields.confirmPassword}
/>
</FormGroup>
<FormGroup controlId="mailingAddressLine1" bsSize="large">
<ControlLabel>Mailing Address Line 1</ControlLabel>
<FormControl
type="text"
name = "mailingAddressLine1"
onChange={handleFieldChange}
value={fields.mailingAddressLine1}
/>
</FormGroup>
<FormGroup controlId="mailingAddressLine2" bsSize="large">
<ControlLabel>Mailing Address Line 2</ControlLabel>
<FormControl
type="text"
name = "mailingAddressLine2"
onChange={handleFieldChange}
value={fields.mailingAddressLine2}
/>
</FormGroup>
<FormGroup controlId="mailingAddressCountry" bsSize="large">
<ControlLabel>Country</ControlLabel>
<CountryDropdown
name = "mailingAddressCountry"
country={fields.mailingAddressCountry}
value={fields.mailingAddressCountry}
onChange={handleFieldChange} />
</FormGroup>
<FormGroup controlId="mailingAddressRegion" bsSize="large">
<ControlLabel>State</ControlLabel>
<RegionDropdown
//country={country}
name="mailingAddressRegion"
country={fields.mailingAddressCountry}
value={fields.mailingAddressState}
onChange={handleFieldChange} />
</FormGroup>
<FormGroup controlId="city" bsSize="large">
<ControlLabel>City</ControlLabel>
<FormControl
type="text"
name="city"
onChange={handleFieldChange}
value={fields.mailingAddressCity}
/>
</FormGroup>
<FormGroup controlId="zipCode" bsSize="large">
<ControlLabel>Zip Code</ControlLabel>
<FormControl
type="text"
name="zipCode"
onChange={handleFieldChange}
value={fields.mailingAddressZip}
/>
</FormGroup>
<FormGroup controlId="useShippingAsBilling" bsSize="large">
<label>
Use Shipping As Billing:
<input
name = "useShippingAsBilling"
type="checkbox"
id="useShippingasBilling"
value={fields.useShippingAsBilling}
checked={fields.useShippingAsBilling === true}
onChange={handleFieldChange} />
</label>
</FormGroup>
<br />
<FormGroup controlId="billingAddressLine1" bsSize="large">
<ControlLabel>Billing Address Line 1</ControlLabel>
<FormControl
name ="billingAddressLine1"
type="text"
value={fields.billingAddressLine1}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="billingAddressLine2" bsSize="large">
<ControlLabel>Billing Address Line 2</ControlLabel>
<FormControl
name ="billingAddressLine2"
type="text"
value={fields.billingAddressLine2}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="billingAddressCountry" bsSize="large">
<ControlLabel>BillingAddressCountry</ControlLabel>
<CountryDropdown
name="billingAddressCountry"
value={fields.billingAddressCountry}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="mailingAddressRegion" bsSize="large">
<ControlLabel>Billing Address Region</ControlLabel>
<RegionDropdown
name="mailingAddressRegion"
country={fields.billingAddressCountry}
value={fields.billingAddressRegion}
onChange={handleFieldChange} />
</FormGroup>
<FormGroup controlId="billingCity" bsSize="large">
<ControlLabel>City</ControlLabel>
<FormControl
name = "billingCity"
type="text"
value={fields.billingAddressCity}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="billingZipCode" bsSize="large">
<ControlLabel>Zip Code</ControlLabel>
<FormControl
name = "billingZipCode"
type="text"
value={fields.billingAddressZip}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="gender" bsSize="sm">
<ControlLabel>Gender</ControlLabel>
<br></br>
<ControlLabel>Male</ControlLabel>
<FormControl
name = "gender"
type="radio"
onChange={handleFieldChange}
value={fields.gender}
checked={fields.gender === 'male'}
/>
<ControlLabel>Female</ControlLabel>
<FormControl
name = "gender"
type="radio"
onChange={handleFieldChange}
value={fields.gender}
checked={fields.gender === 'female'}
/>
<ControlLabel>Other</ControlLabel>
<FormControl
name = "gender"
type="radio"
onChange={handleFieldChange}
value={fields.gender}
checked={fields.gender === 'other'}
/>
</FormGroup>
<FormGroup controlId="onList" bsSize="sm">
<br></br>
<ControlLabel>Join Email List</ControlLabel>
<br></br>
<ControlLabel>Yes</ControlLabel>
<FormControl
name = "onList"
type="checkbox"
onChange={handleFieldChange}
value={fields.onList}
checked={fields.onList === 'true'}
/>
</FormGroup>
<FormGroup controlId="dateOfBirth">
<ControlLabel>Date of Birth</ControlLabel>
<DatePicker
name="dateOfBirth"
value={fields.dateofBirth}
selected={fields.dateOfBirth}
onChange={handleFieldChange}
locale="en"
/>
</FormGroup>
<FormGroup controlId="content">
<ControlLabel>Notes Area</ControlLabel>
<FormControl
name = "content"
value={fields.content}
componentClass="textarea"
onChange={handleFieldChange}
/>
</FormGroup>
<LoaderButton
block
type="submit"
bsSize="large"
isLoading={isLoading}
disabled={!validateForm()}
>
Signup
</LoaderButton>
</form>
);
}
return (
<div className="Signup">
{newUser === null ? renderForm() : renderConfirmationForm()}
</div>
);
}
import { useState } from "react";
export function useFormFields(initialState) {
const [fields, setValues] = useState(initialState);
return [
fields,
function(event) {
setValues({
...fields,
[event.target.name]: event.target.value
});
}
];
}
export default function Signup() {
const [fields, handleFieldChange] = useFormFields({
email: "",
password: "",
confirmPassword: "",
confirmationCode: "",
gender: "",
onList: false,
dateOfBirth: "",
mailingAddressLine1: "",
mailingAddressLine2: "",
mailingAddressCity: "",
mailingAddressState: "",
mailingAddressZip: "",
billingAddressLine1: "",
billingAddressLine2: "",
billingAddressCity: "",
billingAddressState: "",
billingAddressZip: "",
useShippingAsBilling: false,
});
const history = useHistory();
const [newUser, setNewUser] = useState(null);
const { userHasAuthenticated } = useAppContext();
const [isLoading, setIsLoading] = useState(false);
function validateForm() {
return (
fields.email.length > 0 &&
fields.password.length > 0 &&
fields.password === fields.confirmPassword
);
}
function validateConfirmationForm() {
return fields.confirmationCode.length > 0;
}
async function handleSubmit(event) {
event.preventDefault();
setIsLoading(true);
try {
const newUser = await Auth.signUp({
username: fields.email,
password: fields.password,
confirmPassword: fields.confirmPassword,
gender: fields.gender,
firstName: fields.firstName,
lastName: fields.lastName,
onList: fields.onList,
dateOfBirth: fields.dateOfBirth,
mailingAddressLine1: fields.mailingAddressLine1,
mailingAddressLine2: fields.mailingAddressLine2,
mailingAddressCity: fields.mailingAddressCity,
mailingAddressState: fields.mailingAddressState,
mailingAddressZip: fields.mailingAddressZip,
mailingAddressCountry: fields.mailingAddressCountry,
billingAddressCountry: fields.billingAddressCountry,
billingAddressLine1: fields.billingAddressLine1,
billingAddressLine2: fields.billingAddressLine2,
billingAddressCity: fields.billingAddressCity,
billingAddressState: fields.billingAddressState,
billingAddressZip: fields.billingAddressZip,
});
setIsLoading(false);
setNewUser(newUser);
} catch (e) {
onError(e);
setIsLoading(false);
}
}
async function handleConfirmationSubmit(event) {
event.preventDefault();
setIsLoading(true);
try {
await Auth.confirmSignUp(fields.email, fields.confirmationCode);
await Auth.signIn(fields.email, fields.password);
userHasAuthenticated(true);
history.push("/");
} catch (e) {
onError(e);
setIsLoading(false);
}
}
function renderConfirmationForm() {
return (
<form onSubmit={handleConfirmationSubmit}>
<FormGroup controlId="confirmationCode" bsSize="large">
<ControlLabel>Confirmation Code</ControlLabel>
<FormControl
autoFocus
type="tel"
onChange={handleFieldChange}
value={fields.confirmationCode}
/>
<HelpBlock>Please check your email for the code.</HelpBlock>
</FormGroup>
<LoaderButton
block
type="submit"
bsSize="large"
isLoading={isLoading}
disabled={!validateConfirmationForm()}
>
Verify
</LoaderButton>
</form>
);
}
function renderForm() {
return (
<form onSubmit={handleSubmit}>
<FormGroup controlId="email" bsSize="large">
<ControlLabel>Email</ControlLabel>
<FormControl
autoFocus
name = "email"
type="email"
value={fields.email}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="password" bsSize="large">
<ControlLabel>Password</ControlLabel>
<FormControl
type="password"
name = "password"
value={fields.password}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="confirmPassword" bsSize="large">
<ControlLabel>Confirm Password</ControlLabel>
<FormControl
type="password"
name = "confirmPassword"
onChange={handleFieldChange}
value={fields.confirmPassword}
/>
</FormGroup>
<FormGroup controlId="mailingAddressLine1" bsSize="large">
<ControlLabel>Mailing Address Line 1</ControlLabel>
<FormControl
type="text"
name = "mailingAddressLine1"
onChange={handleFieldChange}
value={fields.mailingAddressLine1}
/>
</FormGroup>
<FormGroup controlId="mailingAddressLine2" bsSize="large">
<ControlLabel>Mailing Address Line 2</ControlLabel>
<FormControl
type="text"
name = "mailingAddressLine2"
onChange={handleFieldChange}
value={fields.mailingAddressLine2}
/>
</FormGroup>
<FormGroup controlId="mailingAddressCountry" bsSize="large">
<ControlLabel>Country</ControlLabel>
<CountryDropdown
name = "mailingAddressCountry"
country={fields.mailingAddressCountry}
value={fields.mailingAddressCountry}
onChange={handleFieldChange} />
</FormGroup>
<FormGroup controlId="mailingAddressRegion" bsSize="large">
<ControlLabel>State</ControlLabel>
<RegionDropdown
//country={country}
name="mailingAddressRegion"
country={fields.mailingAddressCountry}
value={fields.mailingAddressState}
onChange={handleFieldChange} />
</FormGroup>
<FormGroup controlId="city" bsSize="large">
<ControlLabel>City</ControlLabel>
<FormControl
type="text"
name="city"
onChange={handleFieldChange}
value={fields.mailingAddressCity}
/>
</FormGroup>
<FormGroup controlId="zipCode" bsSize="large">
<ControlLabel>Zip Code</ControlLabel>
<FormControl
type="text"
name="zipCode"
onChange={handleFieldChange}
value={fields.mailingAddressZip}
/>
</FormGroup>
<FormGroup controlId="useShippingAsBilling" bsSize="large">
<label>
Use Shipping As Billing:
<input
name = "useShippingAsBilling"
type="checkbox"
id="useShippingasBilling"
value={fields.useShippingAsBilling}
checked={fields.useShippingAsBilling === true}
onChange={handleFieldChange} />
</label>
</FormGroup>
<br />
<FormGroup controlId="billingAddressLine1" bsSize="large">
<ControlLabel>Billing Address Line 1</ControlLabel>
<FormControl
name ="billingAddressLine1"
type="text"
value={fields.billingAddressLine1}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="billingAddressLine2" bsSize="large">
<ControlLabel>Billing Address Line 2</ControlLabel>
<FormControl
name ="billingAddressLine2"
type="text"
value={fields.billingAddressLine2}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="billingAddressCountry" bsSize="large">
<ControlLabel>BillingAddressCountry</ControlLabel>
<CountryDropdown
name="billingAddressCountry"
value={fields.billingAddressCountry}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="mailingAddressRegion" bsSize="large">
<ControlLabel>Billing Address Region</ControlLabel>
<RegionDropdown
name="mailingAddressRegion"
country={fields.billingAddressCountry}
value={fields.billingAddressRegion}
onChange={handleFieldChange} />
</FormGroup>
<FormGroup controlId="billingCity" bsSize="large">
<ControlLabel>City</ControlLabel>
<FormControl
name = "billingCity"
type="text"
value={fields.billingAddressCity}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="billingZipCode" bsSize="large">
<ControlLabel>Zip Code</ControlLabel>
<FormControl
name = "billingZipCode"
type="text"
value={fields.billingAddressZip}
onChange={handleFieldChange}
/>
</FormGroup>
<FormGroup controlId="gender" bsSize="sm">
<ControlLabel>Gender</ControlLabel>
<br></br>
<ControlLabel>Male</ControlLabel>
<FormControl
name = "gender"
type="radio"
onChange={handleFieldChange}
value={fields.gender}
checked={fields.gender === 'male'}
/>
<ControlLabel>Female</ControlLabel>
<FormControl
name = "gender"
type="radio"
onChange={handleFieldChange}
value={fields.gender}
checked={fields.gender === 'female'}
/>
<ControlLabel>Other</ControlLabel>
<FormControl
name = "gender"
type="radio"
onChange={handleFieldChange}
value={fields.gender}
checked={fields.gender === 'other'}
/>
</FormGroup>
<FormGroup controlId="onList" bsSize="sm">
<br></br>
<ControlLabel>Join Email List</ControlLabel>
<br></br>
<ControlLabel>Yes</ControlLabel>
<FormControl
name = "onList"
type="checkbox"
onChange={handleFieldChange}
value={fields.onList}
checked={fields.onList === 'true'}
/>
</FormGroup>
<FormGroup controlId="dateOfBirth">
<ControlLabel>Date of Birth</ControlLabel>
<DatePicker
name="dateOfBirth"
value={fields.dateofBirth}
selected={fields.dateOfBirth}
onChange={handleFieldChange}
locale="en"
/>
</FormGroup>
<FormGroup controlId="content">
<ControlLabel>Notes Area</ControlLabel>
<FormControl
name = "content"
value={fields.content}
componentClass="textarea"
onChange={handleFieldChange}
/>
</FormGroup>
<LoaderButton
block
type="submit"
bsSize="large"
isLoading={isLoading}
disabled={!validateForm()}
>
Signup
</LoaderButton>
</form>
);
}
return (
<div className="Signup">
{newUser === null ? renderForm() : renderConfirmationForm()}
</div>
);
}
导出默认函数注册（）{
常量[fields，handleFieldChange]=useFormFields({
电邮：“，
密码：“”，
确认密码：“”，
确认代码：“”，
性别：“，
网友：错，
出生日期：“，
mailingAddressLine1:“”，
mailingAddressLine2:“”，
邮寄地址：“，
mailingAddressState:“”，
mailingAddressZip:“”，
billingAddressLine1:“”，
billingAddressLine2:“”，
billingAddressCity:“”，
billingAddressState:“”，
billingAddressZip:“”，
useShippingAsBilling:false，
});
const history=useHistory（）；
const[newUser，setNewUser]=useState（null）；
const{userHasAuthenticated}=useAppContext（）；
const[isLoading，setIsLoading]=useState（false）；
函数validateForm（）{
返回(
fields.email.length>0&&
fields.password.length>0&&
fields.password===fields.confirmPassword
);
}
函数validateConfirmationForm（）{
返回fields.confirmationCode.length>0；
}
异步函数handleSubmit（事件）{
event.preventDefault（）；
设置加载（真）；
试一试{
const newUser=wait Auth.signUp({
用户名：fields.email，
密码：fields.password，
confirmPassword:fields.confirmPassword，
性别：fields.gender，
firstName:fields.firstName，
lastName:fields.lastName，
onList:fields.onList，
dateOfBirth:fields.dateOfBirth，
mailingAddressLine1:字段。mailingAddressLine1，
mailingAddressLine2:字段。mailingAddressLine2，
mailingAddressCity:fields.mailingAddressCity，
mailingAddressState:fields.mailingAddressState，
mailingAddressZip:fields.mailingAddressZip，
mailingAddressCountry:字段。mailingAddressCountry，
billingAddressCountry:字段。billingAddressCountry，
billingAddressLine1:字段。billingAddressLine1，
billingAddressLine2:字段。billingAddressLine2，
billingAddressCity:fields.billingAddressCity，
billingAddressState:fields.billingAddressState，
billingAddressZip:fields.billingAddressZip，
});
设置加载（假）；
setNewUser（newUser）；
}捕获（e）{
onError（e）；
设置加载（假）；
}
}
异步函数HandleConfigurationSubmit（事件）{
event.preventDefault（）；
设置加载（真）；
试一试{
等待验证确认注册（fields.email，fields.confirmationCode）；
等待授权登录（fields.email，fields.password）；
userHasAuthenticated（true）；
历史。推送（“/”）；
}捕获（e）{
onError（e）；
设置加载（假）；
}
}
函数renderConfirmationForm（）{
返回(
确认码
请检查您的电子邮件中的代码。
验证
);
}
函数renderForm（）{
返回(
电子邮件
密码
确认密码
邮寄地址第1行
邮寄地址第2行
国家
陈述
城市
邮政编码
使用装运作为账单：
帐单地址第1行
帐单地址第2行
BillingAddressCountry
计费地址区域
城市
邮政编码
性别
男性
女性
其他
加入电子邮件列表
对
出生日期
备注区
报名
);
}
返回(
{newUser==null？renderForm（）：renderConfirmationForm（）}
);
}
<CountryDropdown
value={country}
onChange={(val) => this.selectCountry(val)} />
<RegionDropdown
country={country}
value={region}
onChange={(val) => this.selectRegion(val)} />
谢谢你的帮助！你能详细解释一下修改钩子使其不能从裸事件开始工作是什么意思吗？我修改了我的原始答案以说明如何处理钩子。如果你用对象（例如，{mailingAddress:val}）调用updateField，那么你可以使用
import { useState } from "react";
export function useFormFields(initialState) {
const [fields, setValues] = useState(initialState);
return [
fields,
function(value) {
setValues({
...fields,
...value
});
}
];
}