Question

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

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

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

如何避免此问题？

Datepicker代码示例：

 <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

最简单的解决方案可能是不使用onChange事件来获取数据，而仅使用它来控制输入并使用按钮onClick来进行获取。

Answer 2

我不会将其称为性能问题。由于react按照一种数据绑定的方式进行，因此开发人员可以决定何时调用render（或defer rendering）。虚拟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' }}
    />

在上述情况下，输入将是“不受控制的”（默认值），因为直到用户将焦点移到输入之前，react才知道该更改。

Answer 3

我对react js有类似的问题。

当我改变时日期，应用程序未进行更改。这是当前日期。

我已经通过使用onFocus而不是onBlur或onClick来解决了这个问题，因为datepicker自动关注进行更改的文本字段（在我的情况下）。另外，如有必要，请在onChange顶部使用onFocus。

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

我希望它会有所帮助。

Datepicker onChange问题React

3 个答案:

Datepicker onChange问​​题React

3 个答案:

Datepicker onChange问题React