React如何将Navbar组件搜索框输入值通过props传递给Product组件

算力阿峰

2026-10-4

问题核心原因

你当前的传值逻辑不成立是因为React采用单向数据流规则：组件内部定义的私有状态仅能被组件自身和它的后代组件访问。你把搜索值状态searchText定义在Navbar组件内部，而Product是和Navbar平级的兄弟组件，自然无法直接访问到Navbar的内部状态。

解决方案：状态提升

把两个组件共享的搜索值状态，提升到它们的共同父组件（通常是App.js）中维护，再通过props分别向下分发即可：

父组件维护searchText状态和修改状态的方法
给Navbar传递状态值和修改方法，用于绑定输入框的交互
给Product组件传递searchText状态值，用于拼接API请求地址

完整修改代码

1. App.js 修改代码

import { useState } from 'react';
import Navbar from './Navbar';
import Products from './Products';
// 你原有的路由、样式等导入保持不变

function App() {
  // 公共搜索状态移到父组件维护
  const [searchText, setSearchText] = useState('');

  const handleSearchInput = (e) => {
    setSearchText(e.target.value);
  };

  return (
    <div className="App">
      {/* 向Navbar传递状态和修改函数 */}
      <Navbar searchText={searchText} onInputChange={handleSearchInput} />
      {/* 原有路由逻辑保持不变，仅给Products路由传递searchText */}
      <Routes>
        {/* 其他路由（home、about等）保持你原有配置不变 */}
        <Route path="/products" element={<Products value={searchText} />} />
      </Routes>
    </div>
  );
}

export default App;

2. Navbar 组件修改代码

删除内部的私有状态，改用父组件传递的props即可：

// 接收父组件传递的props
const Navbar = ({ searchText, onInputChange }) => {
  return (
    <>
      <div className="nav_main">
        <div className="logo_main">
          <Link exact to='/home' className="logo" > Movie </Link>
        </div>
        <div className="search_main">
          <TextField
            id="input-with-icon-textfield"
            className="searchTextStyle"
            size="small"
            placeholder="search"
            variant="standard"
            // 绑定父组件传过来的状态和修改方法
            value={searchText}
            onChange={onInputChange}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon style={{color:'white'}} />
                </InputAdornment>
              ),
            }}
          />
        </div>
        <div className="nav_menu">
          <NavLink exact activeClassName="active_link" to='/home' className="navitems" > Home  </NavLink>
          <NavLink exact activeClassName="active_link" to='/about' className="navitems" > About </NavLink>
          <NavLink exact activeClassName="active_link" to='/products' className="navitems" > Products </NavLink>
          <IconButton className="account_icon">
            <AccountCircleIcon fontSize="small"/>
          </IconButton>
        </div>
      </div>
    </>
  )
};

export default Navbar;

3. Product 组件调整提示

你原有的组件代码逻辑无需修改，注意检查组件名拼写：你当前写的是Produts，如果是拼写错误建议修正为Products，避免导入或者路由匹配出错。

内容的提问来源于stack exchange，提问作者Tapesh Patel