如何解决正常渲染表单字段与使用函数进行渲染
我有两种方式渲染表单字段
第一种方法是直接将它们放入渲染器中
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;
解决方法
它实际上并不会影响性能。因为如果表单的DOM属性未更改,则不会进行实际的dom操作。要增强更多功能,您可以使用纯组件。制作可更改类型和标签的自定义formField。有一个自定义表单字段组件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。