如何将组件内下拉框的OnSelect选中值传递至App.js？

这是React组件拆分后典型的父子组件通信场景，直接通过props传递回调函数即可，不需要引入额外依赖，分两步修改即可：

• 第一步：父组件App.js给Searchbar传入自定义回调prop
  你已经写好了dropdownHandler处理函数，只需要在调用Searchbar组件时，把这个函数作为自定义prop传进去，和你已经传的setSearchQuery逻辑完全一致。

  <div className="centered-container">
    <Searchbar
      searchQuery={searchQuery}
      setSearchQuery={setSearchQuery}
      onDropdownSelect={dropdownHandler}
    />
  </div>
  

• 第二步：子组件Searchbar.js绑定传入的回调到下拉框事件
  首先在Searchbar组件的入参里解构拿到onDropdownSelect这个prop，然后直接把它绑定到DropdownButton的onSelect属性上即可。React Bootstrap的DropdownButton触发onSelect时，会自动把选中项的eventKey作为入参传回，刚好匹配你写的handler的参数要求。

  // Searchbar组件定义处记得解构新增的prop
  // const Searchbar = ({ searchQuery, setSearchQuery, onDropdownSelect }) => {
  
  <DropdownButton 
    className="dropdown"
    title="Search Filters"
    id="dropdown-menu"
    onSelect={onDropdownSelect}
  >
    <Dropdown.Item eventKey="ddFirstName">First Name</Dropdown.Item>
    <Dropdown.Item eventKey="ddLastName">Last Name</Dropdown.Item>
    <Dropdown.Item eventKey="ddTitle">Title</Dropdown.Item>
    <Dropdown.Item eventKey="ddPhoneNumber">Phone Number</Dropdown.Item>
    <Dropdown.Item eventKey="ddLocation">Location</Dropdown.Item>
  </DropdownButton>
  

补充说明 #

如果后续Searchbar组件内部需要对下拉选中事件做额外处理（比如修改下拉按钮的显示文字、做本地校验），可以不用直接绑定传入的prop，而是先写一个内部处理函数，完成本地逻辑后再调用传入的回调回传值即可，示例：

const Searchbar = ({ searchQuery, setSearchQuery, onDropdownSelect }) => {
  const [localFilterText, setLocalFilterText] = useState("Search Filters")

  const handleSelect = (eventKey) => {
    // 先处理组件内部逻辑
    const filterTextMap = {
      ddFirstName: "First Name",
      ddLastName: "Last Name",
      ddTitle: "Title",
      ddPhoneNumber: "Phone Number",
      ddLocation: "Location"
    }
    setLocalFilterText(filterTextMap[eventKey])
    // 再把值传给父组件，加可选链防止父组件没传该回调时报错
    onDropdownSelect?.(eventKey)
  }

  return (
    <DropdownButton 
      className="dropdown"
      title={localFilterText}
      id="dropdown-menu"
      onSelect={handleSelect}
    >
      {/* 下拉选项保持不变 */}
    </DropdownButton>
  )
}

这种实现完全遵循React单向数据流的设计原则，下拉选中的状态统一收敛在App.js层维护，后续如果页面其他组件需要用到这个筛选值，直接从App.js向下传props即可，不会出现状态分散难以维护的问题。

内容的提问来源于stack exchange，提问作者Skilled Rook