处理 Redux 形式的事件

Question

不太确定如何执行此操作，这在 Redux-Form 世界中相当新鲜。我有一个用于输入的自定义组件，其中包含一个显示无序列表的 onFocus 事件和一个隐藏它的 onBlur 事件。我还将一个 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:

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

处理 Redux 形式的事件

Handle Redux-form events

javascript

reactjs

redux

redux-form