デバウンス実装

Question

私はlodash実装する難しさを抱えている：

私は、キーストロークの後に毎秒毎秒ではなく、エンドAPIコールを存在する場合、私の入力フィールドは、私のチェックをトリガーするようにそれを作るしようとしているが。

（病気は、まず、それは、入力値を設定していること、それは私がデバウンスAPIの呼び出し方法作成する必要があります呼び出すように、後updateInput機能を分離。）

import React, { Component } from 'react'; 
import _ from 'lodash'; 
import { Input, Row, Col } from 'reactstrap'; 
import loading from '../../../../img/loading.gif'; 

class InputTypeComponent extends Component { 

    constructor(props) { 
     super(props); 
     const initialValue = props.value; 
     this.state = { 
      ...initialValue, 
     }; 
     this.updateInput = this.updateInput.bind(this); 
     this.handleProviderChange = this.handleProviderChange.bind(this); 
     this.updateInput = _.debounce(this.updateInput, 1000); 
    } 

componentWillMount() { 
    this.setState({ inputIcon: this.props.icon.inputIcon }); 
} 

componentWillReceiveProps(newProps) { 
    const response = newProps.response; 
    const old = this.props.response; 
    const { id, onChange } = this.props; 
    if (response !== old && response.objectIdentifier === id) { 
     let number = 2; 
     if (response.objectName === '') { 
      number = 0; 
     } else if (response.activ) { 
      if (response.isthere) { 
       number = 4; 
      } else { 
       number = 3; 
      } 
     } 
     this.setState({ inputIcon: number }); 
     onChange({ icon: { 
      ...this.props.icon, 
      inputIcon: number, 
     } }, this.props.id); 
    } 
} 

onRemove =() => { 
    this.props.onRemove(this.props.id); 
}; 

onChange =() => { 
    this.props.onChange(this.props.id); 
}; 

updateInput(event) { 
    const { onChange, exists } = this.props; 
    const inputValue = event.target.value.toUpperCase(); 
    this.setState({ input: inputValue }); 
    onChange({ value: { 
     ...this.state, 
     input: inputValue, 
    } }, this.props.id); 
    const placeHolder = this.props.placeholder.toLowerCase(); 
    const objectIdentifier = this.props.id; 
    const payload = { 
     objectType: placeHolder, 
     objectName: inputValue, 
     objectIdentifier, 
     objectFisrt: '', 
    }; 
    exists(payload); 
} 

render() { 
    const { placeholder, provider, size } = this.props; 
    const { inputIcon } = this.state; 
    this.type = placeholder; 
    return (
     <Row> 
      <Col xs="8"> 
       <Row> 
        <Col xs="11"> 
         <Input 
          value={this.state.input} 
          onChange={this.updateInput} 
          placeholder={placeholder} 
         /> 
        </Col> 
        <Col xs="1" className="margintop noPadding"> 
         {{ 
          0: (
           <div /> 
          ), 
          1: (
           <img className="colorImgBlue" src={loading} alt="loading" /> 
          ), 
          2: (
           <i className="fa fa-times red iconsize" /> 
          ), 
          3: (
           <i className="fa fa-check text-success iconsize" /> 
          ), 
          4: (
           <i className="fa fa-check text-success iconsize" /> 
          ), 
          default: (
           <div /> 
          ), 
         }[inputIcon]} 
        </Col> 
       </Row> 
      </Col> 
     </Row> 
    ); 
} 

これが私の今のコードUpdateInput機能を決してトリガーを破りました。

すべてのドキュメントとブログは希薄ですので、私はどこにも行きません。

Answer 1

エラーメッセージは、実際には、エラーの原因であなたを指している：

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null ... See fb.me/react-event-pooling

が反応あなたのためのすべてのDOMイベントを管理し、その内部のパフォーマンス最適化の一環として、それがAを維持イベントのプールを作成し、新しいイベントのオブジェクトを再利用します。しかし、Reactがイベントをコンポーネントツリーに渡すと、すべてのフィールドがNULLになります。

あなたはupdateInput lodashのみ呼び出し共有イベントオブジェクトをクリアした後反応updateInputsを延期する場合。

constructor() { 
    this.onInput = this.onInput.bind(this); 
    this.updateInput = _.debounce(this.updateInput.bind(this), 1000); 
} 
onInput(event) { 
    const inputValue = event.target.value.toUpperCase(); 
    this.updateInput(inputValue); 
} 
updateInput(inputValue) { 
    // Details omitted for brevity 
}