不太确定如何做到这一点,这在 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
最佳答案
使用 lodash debounce
功能。此函数在函数调用前添加延迟,因此您可以在嵌套元素点击的情况下取消它。
在构造函数中添加:
this.handleBlur = debounce(this.handleBlur, 100);
替换handleClick
:
handleClick () {
if(this.handleBlur.cancel){
this.handleBlur.cancel()
}
console.log('here I am')
}
关于javascript - 处理 Redux 形式的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45508597/