Question

我有两种方式渲染表单字段

第一种方法是直接将它们放入渲染器中

form.tsx

some_dir/some_target

另一种方式

form.tsx

make

这里的问题是每次状态更改时都会调用渲染字段，这是可以理解的，但这会影响我的表现

我下一步要做的是将json模式转换为表单检查它是什么类型的字段，并相应地创建输入字段以及更多其他内容示例json是

import * as React from 'react';

export interface FormProps {
}

export interface FormState {
    personal: any
}

class Form extends React.Component<FormProps, FormState> {
    constructor(props: FormProps) {
        super(props)
        this.state = {
            personal: {
                firstName: "",
                lastName: "",
            }
        }
    }

    handleChange = (event: any) => {
        let personal = { ...this.state.personal };
        personal[event.target.name] = event.target.value;
        this.setState({ personal })
    }

    render() {
        return (
            <div>
                <h1>first name</h1>
                <input type="text" name="firstName" value={this.state.personal.firstName} onChange={this.handleChange} />
                <h1>last name</h1>
                <input type="text" name="lastName" value={this.state.personal.lastName} onChange={this.handleChange} />
            </div>
        );
    }
}

export default Form;

Answer 1

它实际上并不会影响性能。因为如果表单的DOM属性未更改，则不会进行实际的dom操作。要增强更多功能，您可以使用纯组件。制作可更改类型和标签的自定义formField。有一个自定义表单字段组件。

正常渲染表单字段与使用函数进行渲染

1 个答案: