Javascript 处理重复表单事件

不太清楚如何做到这一点，这在Redux表单世界中是一个全新的概念。我有一个用于输入的自定义组件，其中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

import React，{Component}来自“React”
从“../../../styles.scss”导入页面样式
类MyInput扩展组件{
建造师（道具）{
超级（道具）；
此.state={
dropdownIsVisible:false，
dropdownCssClass:“dropdown”
}
this.handleFocus=this.handleFocus.bind（this）；
this.handleBlur=this.handleBlur.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
手焦点（）{
这是我的国家({
dropdownIsVisible:正确，
dropdownCssClass:[dropdown'，pageStyles.dropdown]。加入（“”）
})
}
车把（）{
这是我的国家({
dropdownIsVisible:false，
dropdownCssClass:“dropdown”
})
}
handleClick（）{
console.log（'我在这里'）
}
render（）{
常数{
输入：{
名称
价值
获得焦点
},
标签，
有选择权，
选项，
CSCLASS，
元：{
感动的，
错误
}
}=这是道具
如果（选项）{
var listItems=options.map（（项）=>
{item.name}
)
}
返回(
{label}
{haspoptions==true？
{listItems}
:null}
{触摸&&error&&{error}
)
}
}
导出默认MyInput

使用lodash函数。此函数在调用函数之前增加延迟，因此在嵌套元素单击时可以取消延迟

外接程序构造函数：

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

更换

handleClick

：

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

---

谢谢，它很有魅力。现在我必须弄清楚如何更改输入值！实际上，我不得不对代码进行一些修改，因为仍然有什么东西干扰了handleClick，并且它并没有一直被触发。因此，我从输入中删除了

onBlur={this.handleBlur}

，因此我不再需要handleBlur函数的cancel，直接将handleBlur调用到handleClick中