Todo List App 中搜索字段文本的每次更新的条件渲染

Question

我有一个 React To Do 列表，当应用程序首次加载时，我会显示一个组件数组，每当用户在搜索字段中输入某个字符串时，我希望进行 regex 比较并有条件地进行比较只渲染 那些匹配的组件....

我的UI可能会给你一个更好的主意，看看...

我希望如果我输入 Al 只显示 Alomond 而 Buy milk, Buy toast 不应该显示...

这是我的正则表达式比较的代码...

var searchRegex = new RegExp("/" + searchValue + "/gt");
      console.log("--------------------------------", searchValue);

      let tempitems = items.filter(
        (item) => item.title.search(searchRegex) != -1
      );
      let tempdeletedItems = deletedItems.filter(
        (item) => item.title.search(searchRegex) != -1
      );
      setContent(
        <div>
          {tempitems.map((item) => (
            <ToDoPane
              item={item}
              delFunc={deleteItem}
              done={addToDeletedItems}
              edit={editItem}
            />
          ))}
          <div className="doneWalaDiv">
            {tempdeletedItems.map((item) => (
              <ToDoPane
                item={item}
                delFunc={deleteFromDeletedItems}
                done={addItem}
                edit={editItem}
                type="checked"
              />
            ))}
          </div>
        </div>
      );

如何有条件地呈现以下代码

您可以在此处查看完整的基础组件https://pastebin.com/VWk0tEDq

Answer 1

您可以根据更新状态对输入和过滤项目使用反应状态，代码应如下所示：

export default function CentralPane() {
    const [textInput, setTextInput] = useState('');
    
    
    return (
        <div>
            {items
               .filter(i => i.startsWith(textInput))
               .map(i => (<div></div>))}
        </div>
    );
}

Answer 2

您可以在 render.

中筛选结果

如果 items 是字符串数组，它应该如下所示。

export default function CentralPane() {
    const [searchValue, setSearchValue] = useState(''); // the value of your input text

    return (
        <ul>
        {items.filter(item => item.match(searchValue)).map(filteredItem => (
            <li>{item}</li>
        ))}
        </ul>
    );
}

Answer 3

const [searchValue, setsearchValue] = React.useState("");
const handleChange = (val) => {
    setsearchValue(val);
  };
  useEffect(() => {
    display(searchValue);
  }, [searchValue]);


  function display(searchValue) {
    if (searchValue === '') {
      return <div>
      {items.map((item) => (
        <ToDoPane
          item={item}
          delFunc={deleteItem}
          done={addToDeletedItems}
          edit={editItem}
        />
      ))}
      <div className="doneWalaDiv">
        {deletedItems.map((item) => (
          <ToDoPane
            item={item}
            delFunc={deleteFromDeletedItems}
            done={addItem}
            edit={editItem}
            type="checked"
          />
        ))}
      </div>
    </div>;
    } else {
      // var searchRegex = new RegExp(searchValue);
      // searchRegex+='gi';
      // console.log('regex ye nikal ke aya h ',searchRegex);

      let tempitems = items.filter(
        (item) => item.title.search(searchValue)!=-1
      );
      let tempdeletedItems = deletedItems.filter(
        (item) => item.title.search(searchValue)!=-1
      );
      console.log('Ye sab filter hua saman h',tempitems,tempdeletedItems);
      return <div>
      {tempitems.map((item) => (
        <ToDoPane
          item={item}
          delFunc={deleteItem}
          done={addToDeletedItems}
          edit={editItem}
        />
      ))}
      <div className="doneWalaDiv">
        {tempdeletedItems.map((item) => (
          <ToDoPane
            item={item}
            delFunc={deleteFromDeletedItems}
            done={addItem}
            edit={editItem}
            type="checked"
          />
        ))}
      </div>
    </div>;
    }
  }

上面的代码可用于在 React 组件的 return() 块中有条件地呈现函数 display()。

只需在 return 的 return 部分中调用一个简单的 JSX 函数，如下所示：

{display(searchValue)}

就是这样。 useEffect() 钩子会自动调用 React dom 来重新渲染组件。

Todo List App 中搜索字段文本的每次更新的条件渲染

Conditional rendering with every Update in text of search-field in a Todo List App

javascript

reactjs

conditional-rendering

react-hooks