在选择输入之外单击时更改状态

Question

我有一个带有 nextjs 的项目。在我的项目中我有表单组件。在这个组件中我有一个选择组件。当我的选择输入打开时我显示此消息 => 选择打开并且当我的选择输入关闭时我显示此=> select已关闭。我的问题是当我的选择打开并在选择状态的外部夹住时，我的问题未更新。 p>

这是我的表单组件

import React, {useState} from 'react';
import Select from "./Select";

const Form = props => {
    const [isOpen, setIsOpen] = useState(false);
    const onClickHandler = () => {
        setIsOpen(state => !state);
    }

    return (
        <div>
            <form>
                <Select isOpen={isOpen} name='select' id='select' onClick={onClickHandler}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </Select>
            </form>
        </div>
    );
};


export default Form;

这是我的 Select 组件

import React from 'react';
import PropTypes from 'prop-types';

const Select = props => {
    return (
        <div>
            {props.isOpen ?
                <div>Select is Opened</div> : <div>Select is closed</div>
            }
            <select onClick={props.onClick} name={props.name} id={props.id}>
                {props.children}
            </select>
        </div>
    );
};

Select.propTypes = {
    name: PropTypes.string.isRequired,
    id: PropTypes.string,
    isOpen: PropTypes.bool,
    onClick: PropTypes.func,
    onChange: PropTypes.func,
    children: PropTypes.node
};

export default Select;

如果有人可以帮助我，我将非常感激

Answer 1

您可以使用onBlur 事件来处理此操作:) 点击外部时onBlur调用函数！