阅读（未设置）关注 React 中的输入？

Question

谷歌没有帮助解决的奇怪问题......如果输入集中在 React 中，我如何阅读？

如果输入没有聚焦，我想要做的是隐藏我创建的自动完成 div。有没有办法做到这一点？

就像现在一样，如果您在文本输入中留下一些内容并且不点击自动完成建议之一，那么即使在移动到搜索结果和详细信息页面之后，自动完成 div 也会保留在那里。

我已经尝试通过将它从提交时拉取的数组设置为无，然后它给出我的渲染错误太多了。

这是表格：

<form className="input-group mb-3" onSubmit={submit()}>
    <input
        type="text"
        className="form-control mr-sm-2"
        onChange={e => onSearch(e)}
        placeholder="Search to follow the money"
        value={searchedValue}
        />
    <Link to={`/searchresults/${selected}`} selected={selected}>
        <button
            type="submit"
            className="btn btn-light my-2 my-sm-0 shadow-sm"
            style={{
                height: "40px",
                borderRadius: "0px",
                MozBorderRadius: "0px",
                WebkitBorderRadius: "0px"
            }}
        >
        <img
                alt="search-icon"
                src={require("../../assets/its-a-bribe-search-punch-01.png")}
                style={{ width: "24px" }}
            />
        </button>
    </Link>
</form>

自动完成 div 如下所示：

<div className="container auto-complete-container">{renderSugs()}</div>

onSubmit 目前就是这样：

const submit = () => {
        // setSuggestions([]);

    }

如果我取消注释 setSuggestions，即使表单尚未提交，它只会给我太多渲染错误？

这是我的 onSearch 函数：

    const onSearch = e => {
        setSearchedValue(e.target.value);
        const value = e.target.value;
        let suggestions = [];

        if (value.length) {
            suggestions = options.filter(option => {
                var name = option.name;
                // console.log("option", option)
                return name.toLowerCase().includes(searchedValue.toLowerCase());
            });
        }
        setSuggestions(suggestions);
    };

为了呈现建议，我有一个名为 renderSugs 的函数，它映射建议并为每个建议显示：

<Link
    key={item.id + Math.random() * 100}
    to={`/politician/${item.id}`}
    style={{ textDecoration: "none", color: "black" }}
>
    <li
        onClick={() => {
             setSearchedValue(item.name);
             setSuggestions([]);
        }}
    >
        {item.name}
    </li>
</Link>

在 onClick 那里你会看到我正在做一个 setSuggestions，它在这里工作得很好。但是当我在 onSubmit 中尝试同样的事情时它不起作用？？？

帮助？

Answer 1

假设它是一个基于类的组件（因为您标记了问题state），您可以这样做。

将建议 div 包装成这样的条件

{this.state.showSuggestions && <div className="container auto-complete-container">{renderSugs()}</div>}

并在您的输入中添加 onFocus 和 onBlur

<input
    type="text"
    className="form-control mr-sm-2"
    onChange={e => onSearch(e)}
    placeholder="Search to follow the money"
    value={searchedValue}
    onFocus={() => this.setState({showSuggestions: true})}
    
    />

<Link
    key={item.id + Math.random() * 100}
    to={`/politician/${item.id}`}
    style={{ textDecoration: "none", color: "black" }}
    >
    <li
        onClick={ async () => {
            await setSearchedValue(item.name);
            await setSuggestions([]);
            this.setState({showSuggestions: false})}
        }}
    >
        {item.name}
    </li>
</Link>