React开发：如何从子Autocomplete组件获取输入值传递给父组件

你当前的实现存在两个核心错误：

• 传给子组件的回调没有和子组件内部维护的输入状态关联，子组件从未触发该回调回传当前输入值
• 父组件搜索按钮和子组件的状态没有建立同步链路，自然无法读取到子组件的输入内容

方案1：状态提升（推荐，符合React单向数据流规范） #

1. 父组件先定义存储搜索词的状态：

import { useState } from 'react'

// App组件内
const [searchKeyword, setSearchKeyword] = useState('')

2. 给Autocomplete子组件传递onInputChange属性，替换你原来传的onClick：

<Autocomplete onInputChange={setSearchKeyword} />

3. 修改Autocomplete子组件的输入框逻辑，每次输入变化时调用父组件传入的回调同步值：

// 子组件内部输入框的onChange处理函数
const handleInputChange = (e) => {
  // 原有更新子组件内部输入状态的逻辑保留
  setInternalInput(e.target.value)
  // 新增：调用父组件传入的回调，同步最新值到父组件
  props.onInputChange?.(e.target.value)
}

4. 父组件的搜索按钮点击时直接读取searchKeyword就能拿到最新的输入值。

方案2：Ref直接取值（适合不想修改子组件逻辑的场景） #

1. 父组件创建ref绑定到Autocomplete子组件：

import { useRef } from 'react'

// App组件内
const autocompleteRef = useRef(null)

// 渲染时绑定ref
<Autocomplete ref={autocompleteRef} />

2. 搜索按钮点击时通过ref读取子组件内部的输入状态：

const handleSearch = () => {
  // 这里的state.inputValue替换为你子组件内部实际存储输入值的状态字段名
  const inputVal = autocompleteRef.current?.state.inputValue
  // 后续搜索逻辑直接使用inputVal即可
}

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