需要帮助以使搜索功能在反应中起作用[关闭]

Posted 2023-02-22

【中文标题】需要帮助以使搜索功能在反应中起作用[关闭]

【英文标题】：need assistance on making search feature work in react [closed]

【发布时间】：2019-06-22 05:17:23

【问题描述】：

所以我有一个叫Form的组件，这个组件可以根据用户输入进行实时搜索，

表单组件必须在搜索组件中呈现，这是它的屏幕截图

在我的 App.js 上，我为 Search 组件提供了一个 prop thst，其中包含一个名为 performSearch 的函数

但是，当我尝试提交搜索输入时，我收到此错误：

有人可以帮忙

【问题讨论】：

请将代码发布为文字，而不是图片。

我本来打算那样做的，但是这个网站给了我一个警告，我不应该使用大部分空间写作语法

【参考方案1】：

您可以在单个渲染中将任意数量的道具传递给组件，即 在渲染搜索组件时，像这样传递 onSearch 属性：

  <Route
    exact
    path="/search"
    render=() => (
      <Search
        onSearch=this.performSearch
        data=this.state.pics
      />
    )
  />

如果你像这样传递 prop，它永远不会在组件中找到 prop onSearch，因为它正在渲染第一个匹配并且它没有任何 prop onSearch

这是不正确的做法：

  <Route
    exact
    path="/search"
    render=() => <Search  data=this.state.pics />
  />
  <Route
    exact
    path="/search"
    component=() => <Search onSearch=this.performSearch />
  />

供您参考，您可以查看：https://codesandbox.io/s/llk96nk5l

【讨论】：

谢谢你成功了，虽然我注意到由于某种原因我的主页组件的图片与我的其他导航链接的图片结合在一起，你也发生过这种情况吗？

我做了一个提交，这样你就可以看到我在说什么，如果你想看看，当你点击猫、狗和电脑时就会发生这种情况