打字时表单输入非常慢/延迟

Question

我有一个由2个对象组成的表单——a和B两个对象中都有大约20个变量。

当它键入时，在用该值更新状态之前会有几秒钟的延迟。

我的状态是这样的，数据是从父组件传入的：

export class Booking extends Component<any, BookingProps & BookingState> {

constructor(bookingProps: BookingProps) {
super(bookingProps);
this.state = {
a: bookingProps.a,
b: bookingProps.b,
errors: {}
... around six other objects for modal, default data etc
};
}

许多输入表单字段如下所示：

<Form.Field>
<label htmlFor="ref">Ref</label>
<input
placeholder="Ref"
value={this.state.a.ref}
id="ref"
onChange={this.handleBookingFieldChange}
style={{ backgroundColor: 'lightgrey' }}
/>
</Form.Field>

在state.b的其他表单字段部分中，它完全相同，只是值是this.state.b.ref，onChange是onChange={this.handleBookingExtrasChange}。

因此，从本质上讲，我为状态a和状态b分别提供了onChange处理程序：

private handleBookingFieldChange = (e: any) => {
const key = e.target.id;
const value = e.target.value;
this.setState({
booking: { ...this.state.a, [key]: value }
});
};

因此，当我打字时，大约需要3秒钟的时间，字母才会出现在文本字段中。我是React(来自Angular(的新手，不知道为什么要花这么长时间才能显示我键入的内容。

我猜州政府正在更新每个字段，但我不确定。我能做些什么来加快速度？

Answer 1

我发现，通过切换输入，在键入时会有一点效果——本质上是设置defaultValue而不是value，并使用onBlur而不是onChange。现在，当键入时，表单字段会更新

<Form.Field>
<label htmlFor="ref">Ref</label>
<input
placeholder="Ref"
defaultValue={this.state.a.ref}
id="ref"
onBlur={this.handleBookingFieldChange}
type={'number'}
/>
</Form.Field>