我在下面的代码中使用开关盒来比较带有字符串的对象键:
import { TextField, Button } from "@material-ui/core";
import React, { Component, ReactNode } from "react";
import classes from "./Contact.module.scss";
class contactForm extends Component {
state = {
contactForm: {
name: "",
email: "",
message: "",
phone: ""
}
};
render(): ReactNode {
return (
<form className={classes.ArticleBody}>
<div className={classes.ContactForm}>
<TextField
value={this.state.contactForm.name}
onChange={event => this._inputChangeHandler(event, "name")}
label="Full Name"
required
/>
<TextField
value={this.state.contactForm.email}
onChange={event => this._inputChangeHandler(event, "email")}
type="Email"
label="Email"
required
/>
<TextField
value={this.state.contactForm.phone}
onChange={event => this._inputChangeHandler(event, "phone")}
type="phone"
label="Phone Number"
required
/>
<TextField
type="textarea"
value={this.state.contactForm.message}
label="Comment/Message"
rows="4"
onChange={event => this._inputChangeHandler(event, "message")}
multiline
required
/>
</div>
<div className={classes.Submit}>
<Button type="submit" onClick={this._submitContactForm}>
Submit
</Button>
</div>
</form>
);
}
private _inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, key: string) => {
const updatedFormData = { ...this.state.contactForm };
switch (key) {
case "email":
updatedFormData.email = event.target.value;
break;
case "phone":
updatedFormData.phone = event.target.value;
break;
case "message":
updatedFormData.message = event.target.value;
break;
case "name":
updatedFormData.name = event.target.value;
break;
}
this.setState({ contactForm: updatedFormData });
};
private _submitContactForm = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
event.preventDefault();
console.log(this.state.contactForm);
};
}
export default contactForm;
我不想将对象键与switch
大小写进行比较。是否存在任何通用方法来更改已定义状态的输入更改的值?例如:在下面的代码中,我试图匹配方法_inputChangeHandler
中参数的键,但会引发错误
元素隐式具有'any'类型,因为类型的表达式'string'不能用于索引类型'{name:string;电子邮件:字符串;讯息:字串;电话:字符串; }'
const updatedFormData = { ...this.state.contactForm };
updatedFormData[key] = event.target.value;
this.setState({ contactForm: updatedFormData });
谢谢
尝试这样
this.setState({ contactForm: {...this.state.contactForm, [key]: event.target.value} });