搜索輸入在找不到任何標題時失去焦點

Question

每當我嘗試搜索時，我只能輸入與其中一個標題相似的字母。 如果任何字母不同，我就會失去輸入的焦點。 它以前可以正常工作，但我知道現在發生了什么。 有什么建議么？

它最初的樣子：

開始輸入搜索輸入后：

當我輸入一個不在標題中的字母時：

代碼：

if (props.items.length === 0) {
    return (
      <div className="files-list center">
        <Card>
          <h2>No files found.</h2>
        </Card>
      </div>
    );
  } else if (
    props.items.filter(
      (file) =>
        file.title.toLowerCase().includes(searchInput) ||
        file.title.toUpperCase().includes(searchInput)
    ).length === 0
  ) {
    return (
      <div className="filesList">
        <div className="search">
          <input
            type="text"
            placeholder="Search Files"
            onChange={(event) => setSearchInput(event.target.value)}
          />
        </div>
        <Card>
          <h2>No files found.</h2>
        </Card>
      </div>
    );
  }

  return (
    <React.Fragment>
      <div className="filesList">
        <div className="actionsBtn">
          <NavLink to="/add-file" className="addFileBtn" title="Add File">
            <FontAwesomeIcon icon={faPlus} />
          </NavLink>
          <input
            type="text"
            placeholder="Search Files"
            onChange={(event) => setSearchInput(event.target.value)}
          />
        </div>
        <ul className="files-list">
          {props.items
            .filter(
              (file) =>
                file.title.toLowerCase().includes(searchInput) ||
                file.title.toUpperCase().includes(searchInput)
            )
            .map((file) => (
              <FilesPostItem
                key={file.id}
                id={file.id}
                title={file.title}
                file={file.file}
                creator={file.creator.name}
                description={file.description}
                creatorId={file.creator}
                onDelete={props.onDeleteFile}
              />
            ))}
        </ul>
      </div>
    </React.Fragment>
  );

Answer 1

我認為發生的情況是，您的“默認”返回表單開始被“if else”中的返回重置。 所以 Input 是一個新的 DOM 元素並且失去了焦點。

您可能希望在默認回報中添加類似的內容並刪除“if else”語句。

 <ul className="files-list"> {props.items .filter( (file) => file.title.toLowerCase().includes(searchInput) || file.title.toUpperCase().includes(searchInput) ) .map((file) => ( <FilesPostItem key={file.id} id={file.id} title={file.title} file={file.file} creator={file.creator.name} description={file.description} creatorId={file.creator} onDelete={props.onDeleteFile} /> ))} </ul> {props.items .filter( (file) => file.title.toLowerCase().includes(searchInput) || file.title.toUpperCase().includes(searchInput) ).length > 0 && <Card> <h2>No files found.</h2> </Card> }

這是做什么的？ 它會將“未找到文件”消息添加到您的默認退貨中，並僅在項目為空時顯示。

但我很確定，有更好的方法來做到這一點。