待办事项列表应用程序中搜索字段文本中的每个更新的条件渲染

Posted 2023-02-22

【中文标题】待办事项列表应用程序中搜索字段文本中的每个更新的条件渲染

【英文标题】：Conditional rendering with every Update in text of search-field in a Todo List App

【发布时间】：2021-11-04 00:15:23

【问题描述】：

我有一个反应待办事项列表，当应用程序首次加载时，我会显示一个组件数组，每当用户在搜索字段中输入一些字符串时，我希望进行 正则表达式比较并有条件地呈现 只有那些匹配的组件......

我的 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

【参考方案1】：

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

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

【参考方案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>
    );

【参考方案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 部分内进行一个简单的 JSX 函数调用，如下所示：

display(searchValue)

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