如何在打字稿中的ReactJs中从inputText更改传递键值？

debugcn 发表于 Dev

阿杰·维玛（Ajay Verma）

我在下面的代码中使用开关盒比较对象键与字符串：

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 });

谢谢

syJSdev

这样尝试

this.setState({ contactForm: {...this.state.contactForm, [key]: event.target.value} });

@阿杰维玛

您可以设置的name属性，TextField然后从中获取密钥event。

像这样

...
private _inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const key = event.target.name;
...
<TextField
    value={this.state.contactForm.phone}
    name="phone"
    onChange={this._inputChangeHandler}
    type="phone"
    label="Phone Number"
    required
/>
...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。