Question

我必须在搜索列表中显示defaultValues列表，当我单击其中任何一个项目时，它应该带我到该项目的组件，但不会随处可见。这只发生在defaultValues上，因为一旦我开始输入，那么如果我单击任何搜索结果，它将带我到所需的组件。我的代码有什么问题？

这是代码

const [search, setSearch] = useState("");
const [showDefaultValues, setShowDefaultValues] = useState(false);
const [defaultValues] = useState({
    Mumbai: true
  }); 

 {!search.length && showDefaultValues ? (
            <div className="result-box">
              {data
                .filter((item, idx) => defaultValues[item.district])
                .map((dist, idx) => (
                  <div
                    key={idx}
                    className="search-result"
                    onClick={() => {
                      
                      onResultClick(dist.district);
                    }}
                  >
                    {highlightedText(dist.district, search)}
                    
                  </div>
                ))}
            </div>
          ) : null}

Answer 1

您忘记在默认搜索结果项上实现onClick逻辑，这就是为什么搜索结果可以正常工作而默认搜索项无法正常工作的原因。

选中指向有效的codesandbox的链接。

我所做的就是调用“区域”组件的相同onResultClick函数onClick。

<div
        className="dist"
        onClick={() => {
          this.props.onResultClick(item.district);
        }}
      >
...
</div>

希望这可以解决您的问题。

Answer 2

只需将component / search / search.js第39行的代码更改为49

<input
   placeholder="Search for a District..."
   type="text"
   className="search-input"
   value={search}
   onChange={onSearchInputChange}
   onFocus={() => {
      toggleDefaultValues(true);
   }}
   onBlur={onBlurInput}
/>

收件人

<input
   placeholder="Search for a District..."
   type="text"
   className="search-input"
   value={search}
   onChange={onSearchInputChange}
   onFocus={() => {
      toggleDefaultValues(true);
   }}
/>

或者只是删除第48行

要对此进行补偿，您可以在useEffect中添加以下内容（类似于componentDidMount）

document.addEventListener("mousedown", handleInputClickOutside);

添加功能handleInputClickOutside以将状态设置为false / hide

reactjs中的onClick不显示项目

2 个答案: