时间戳

首页 > 解决方案 > 输入时表单输入非常慢/延迟

javascript - 输入时表单输入非常慢/延迟

问题描述

我有一个由 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>

this.state.b.ref在 state.b 的其他表单字段部分中，除了 value和 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），想不出为什么要花这么长时间才能显示我输入的内容。

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

标签： javascriptreactjsformssemantic-ui-react

解决方案

我发现通过稍微切换输入将在您键入时起作用 - 本质上是设置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>

推荐阅读