Javascript 如何仅在单击组件外时执行onBlur？

我有一个具有

表单

和

输入

和下拉列表的组件。我想用

onBlur

事件发送一个动作，但它并不像我想象的那样工作-所以如果我点击下拉组件，blur将执行。如何处理它-仅当我从具有onBlur事件处理程序的组件中单击时，才能获取

onBlur

操作

组成部分

import React, { Component } from 'react';
import FoundedIngredient from './FoundedIngredient';
import { connect } from 'react-redux';
import { actionFindIngredients, actionClearFoundIngredients } from '../actions/actionCreators';

class FoundedIngredients extends Component {
    render() {
        const { foundIngredients } = this.props.aside;
        const { actionFindIngredients, actionClearFoundIngredients } = this.props;
        const isEmpty = foundIngredients.length > 0;
        const list = foundIngredients.map(({ id, img, name }, key) => {
            return (
                <FoundedIngredient
                    key={`ingr-${key}`}
                    id={id}
                    img={img}
                    name={name}
                >
                </FoundedIngredient>
            )
        });
        return (
            <div className="form">
                <form
                    onBlur={() => actionClearFoundIngredients()}
                >
                    <div className="input-wraper">
                        <input
                            type="text"
                            placeholder="Beer, lime or smth..."
                            onChange={(e) => actionFindIngredients(e.target.value)}
                            onFocus={(e) => actionFindIngredients(e.target.value)}
                        />
                    </div>
                    {
                        isEmpty &&
                        <div className="drop">
                            <div className="block">
                                {list}
                            </div>
                        </div>
                    }
                </form>
            </div>
        );
    }
}

export default connect(state => ({
    aside: state.aside
}), { actionFindIngredients, actionClearFoundIngredients })(FoundedIngredients)

import React，{Component}来自'React'；
从“./FoundedIngredient”导入FoundedIngredient；
从'react redux'导入{connect}；
从“../actions/actionCreators”导入{ActionFindingElements，ActionClearFoundComponents}；
类FoundedGredients扩展组件{
render（）{
const{foundComponents}=this.props.aside；
const{actionFindingElements，actionClearFoundComponents}=this.props；
const isEmpty=0.length>0；
const list=foundComponents.map（{id，img，name}，key）=>{
返回(
)
});
返回(
ActionClearFoundComponents（）}
>
ActionFindingElements（e.target.value）}
onFocus={（e）=>ActionFindingElements（e.target.value）}
/>
{
空空如也&&
{list}
}
);
}
}
导出默认连接（状态=>({
旁白，旁白
})，{ActionFindingComponents，ActionClearFoundComponents}）（FoundingGreents）

遵循此操作，您将知道在组件外部单击或不单击可能有用