React中的滞后文本字段更新

Question

我对反应还比较陌生，在理解将道具/状态从子组件传递到父组件时遇到了一些困难。我已经设法实现了一些有效的东西，但它非常滞后。

概述：我正在尝试创建一个具有多个材料UI文本字段的表单，在末尾有一个提交按钮来提交表单。

我的方法是：使用state更新输入中的各个文本字段，然后动态更新父FormSection文件中的另一个状态。一旦用户单击"提交"按钮(尚未实现(，它将从父类获取所有状态。

现有类别：

1. CompanyField.js
2. 职务.js
3. FormSection.js(主文件(

实现外观

CompanyField类(与职务等相同(：

const Root = styled('div')(({ theme }) => ({
}));
class CompanyField extends React.Component {
state = { company: '' }
handleOnChange = (event) => {
event.preventDefault();
this.setState({ company: event.target.value.toLowerCase() });
this.props.onCompanyChange(this.state.company);
}
render() {
return (
<Root>
<Box
noValidate
autoComplete="off"
>
<TextField
id = "outlined-basic" 
label = "Company" 
variant = "outlined"
fullWidth
value = {this.state.company}
onChange = { this.handleOnChange }
/>
</Box>
</Root>
);
}
}
export default CompanyField;

索引类

class FormSection extends React.Component {
state = { company: '', jobTitle: '' }
onCompanyUpdate = (value) => {
this.setState({company: value})
// console.log('Company:', this.state.company);
}
render() {
return (
<FormContainer>
<FormContentHeaderWrapper>
<FormContentHeader>
Company & Job Information
</FormContentHeader>
</FormContentHeaderWrapper>
<FormWrapperFull>
<CompanyField onCompanyChange={ this.onCompanyUpdate } />
<JobTitleField onJobTitleChange={ this.onJobTitleUpdate } />
</FormWrapperFull>
</FormContainer>
)
}

有人能解释一下我这样做是否正确吗？否则，会有更好的方法来解决这种状态传递方法吗？

提前感谢！

Answer 1

更新父组件时，每次击键时都会重新呈现整个树。在你的情况下，你的组件很小，应该不会有太大的影响。我想有三种方法。

首先，您必须使用react开发人员工具来调查进一步的重新渲染并找到真正的问题。

第一：您可以使用表单验证库。例如"反钩形式"；

第二：您可以使用React的"；反应备忘录"；用于记忆组件的功能。

第三：您可以使用refs进行输入值管理。您可以向ref添加值，并且在需要时迭代该ref对象。您不更新状态。如果没有状态更新，就不会有重新应答器。

例如：在父组件中：

const values = useRef({description: "", jobtitle: ""});
const onChange(name, value) {
values.current[name] = value;
}

在子组件中：(它必须是"不受控制的组件"(

const handleCompanyChange = (evt) => {
const value = evt.target.value;
const name = "company";
props.onChange(name, value);
}