Question

我的输入栏很简单。我想等待字段完全更改，然后只调用一个函数，因为例如，如果输入包含15个字母，则我调用函数将标头更改15次，我尝试使用setTimeot，但它不起作用

我的功能是：

    changeCity = (e) => {
    let storedHeader = JSON.parse(localStorage.getItem('offer_header'))
      if(storedHeader !== null) {
        let updatedHeader = {
            id : storedHeader.id,
            customer : storedHeader === null ? this.state.customer : storedHeader.customer,
            address : storedHeader === null ? this.state.address : storedHeader.address,
            city : e.target.value,
            date : storedHeader === null ? moment(this.state.date).format("YYYY-MM-DD 00:00:00") : moment(storedHeader.date).format("YYYY-MM-DD 00:00:00"),
            price : parseFloat(localStorage.getItem('offer_header_price')),
            tax : parseFloat(localStorage.getItem('offer_header_price')) * 0.21,
            total : parseFloat(localStorage.getItem('offer_header_price')),
        }
         this.props.editHeaderDB(updatedHeader)
    }
    this.setState({
        city: e.target.value
    })
}

 <Col className="pr-md-1" md="3">
    <FormGroup>
       <label className="addOfferLabel">Grad</label>
       <Input style={{'fontSize':'14px'}}
              type="text"
              value={this.state.city || (storedHeader === null ? "" : storedHeader.city)}
              onChange={this.changeCity}
              onKeyDown={this.focusCity}
              innerRef={(input) => {this.inputCity = input}}
              onFocus={(e)=>e.target.select()}
        />
     </FormGroup>
  </Col>

Answer 1

您可能正在寻找去抖动的行为。

为此，可以使用lodash防反跳功能。说明和示例here

import { debounce } from 'lodash';
    
...      

onChange = debounce(
  (e) => {
     // callYourFunction
  },
  delayInMilliSecs, // 500
  options, // { leading: false, trailing: true, }
);

...


<Input style={{'fontSize':'14px'}}
...
  onChange={this.onChange}
...
/>

等待输入字段更改，然后调用函数

1 个答案: