Redux形式のイベントを処理する

Question

これを行う方法はわかりません.Redux-Formの世界では全く新しいものです。私は、順序付けられていないリストとそれを隠すonBlurイベントを表示するonFocusイベントで、自分の入力用のカスタムコンポーネントを持っています。リストアイテムをクリックすると入力フィールドの値を変更したいが、最初にぼかしが発生するため、クリックイベントは発生しないため、onClickイベントをアイテムに追加しています。 コードを正しくアドレス指定しているかどうかわかりません。

import React, { Component } from 'react' 
import pageStyles from '../../../styles.scss' 

class MyInput extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     dropdownIsVisible: false, 
     dropdownCssClass: 'dropdown' 
    } 
    this.handleFocus = this.handleFocus.bind(this); 
    this.handleBlur = this.handleBlur.bind(this); 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleFocus() { 
    this.setState({ 
     dropdownIsVisible: true, 
     dropdownCssClass: ['dropdown', pageStyles.dropdown].join(' ') 
    }) 
    } 

    handleBlur() { 
    this.setState({ 
     dropdownIsVisible: false, 
     dropdownCssClass: 'dropdown' 
    }) 
    } 

    handleClick() { 
    console.log('here I am') 
    } 

    render() { 
    const { 
     input: { 
     name, 
     value, 
     onFocus 
     }, 
     label, 
     hasOptions, 
     options, 
     cssClass, 
     meta: { 
     touched, 
     error 
     } 
    } = this.props 

    if(options) { 
     var listItems = options.map((item) => 
     <li key={ item.id } onClick={ this.handleClick }>{ item.name }</li> 
    ) 
    } 

    return (
     <div className={ cssClass }> 
     <label>{ label }</label> 
     <input name={ name } id={ name } type="text" onFocus={ this.handleFocus } onBlur={ this.handleBlur } autoComplete="off" /> 
     { hasOptions === true ? <ul className={ this.state.dropdownCssClass }>{ listItems }</ul> : null } 
     { touched && error && <span className="error">{ error }</span> } 

     </div> 
    ) 
    } 
} 

export default MyInput 

Answer 1

使用lodash debounce機能： はここに私のカスタムコンポーネントです。この関数は、関数呼び出しの前に遅延を追加するので、要素をクリックしたときにキャンセルできます。

コンストラクタに追加します。

this.handleBlur = debounce(this.handleBlur, 100); 

が​​を置き換える：

handleClick() { 
    if(this.handleBlur.cancel){ 
    this.handleBlur.cancel() 
    } 
    console.log('here I am') 
}