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

Question

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

我想要做的是隐藏我创建的自动完成功能 div 如果输入没有被聚焦。有办法吗？

就像现在一样，如果您在文本输入中留下了一些内容并且没有点击自动完成建议之一，自动完成 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

假设它是一个基于 class 的组件（因为您标记了问题 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>

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

Read (NOT SET) focus on an input in React?

javascript

state

focus

reactjs