javascript - Datepicker onChange 问题 React

Question

在日期选择器上，我有一个 onChange 事件。问题是当用户开始手动更改日期时。

如果用户仅更改日期，则调用 onChange 函数并发送数据请求。

如果用户继续手动进行更改，每次执行onChange时，都会导致性能问题。

如何避免这个问题？

日期选择器代码示例:

 <Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onChange={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     value={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

Answer 1

我不会称其为性能问题。由于 React 遵循一种方式的数据绑定(bind)，因此由开发人员决定何时调用渲染(或延迟渲染)。虚拟 DOM 应该同步。

顺便说一句，您可以使用“onBlur”而不是“onChange”，仅在用户完成输入并集中注意力时触发更改。

<Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onBlur={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     defaultValue={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

在上面的情况下，输入将是“不受控制的”(defaultValue)，因为在用户将焦点移出输入之前，react 不会意识到更改。