React函数组件中子组件向父组件传值：实现搜索框输入时隐藏列表组件

嗨，这个问题其实很常见，在函数组件里我们只需要通过props传递一个回调函数，就能让子组件把输入的值同步给父组件，进而控制ItemsComponent的显示。我给你一步步拆解方案：

核心思路 #

父组件维护控制显示的search状态，然后把一个更新这个状态的回调函数传给子组件SearchBarComponent；子组件在输入框内容变化时，调用这个回调函数把最新的输入值传给父组件，这样父组件的状态就和子组件的输入同步了，就能按需求隐藏/显示ItemsComponent。

完整代码示例 #

1. 父组件 MainHomepageComponent #

这里我们定义状态和回调函数，并把回调传给子组件：

import React, { useState } from 'react';
import { View, ScrollView } from 'react-native';
import SearchBarComponent from './SearchBarComponent';
import ItemsComponent from './ItemsComponent';

const MainHomepageComponent = () => {
  // 父组件维护search状态
  const [search, setSearch] = useState('');

  // 定义回调函数，接收子组件传来的搜索文本
  const updateSearch = (text) => {
    setSearch(text);
  };

  return (
    <View>
      {/* 把回调函数和当前search值传给子组件 */}
      <SearchBarComponent onUpdateSearch={updateSearch} currentSearch={search} />
      
      <ScrollView style={{ height: windowHeight }}>
        {/* 根据父组件的search状态控制ItemsComponent显示 */}
        {search.length < 1 ? (
          <View>
            <ItemsComponent />
          </View>
        ) : null}
      </ScrollView>
    </View>
  );
};

export default MainHomepageComponent;

2. 子组件 SearchBarComponent #

子组件接收父组件的回调，在输入变化时调用它：

import React from 'react';
import { TextInput } from 'react-native';

// 子组件通过props接收回调函数和当前搜索值
const SearchBarComponent = ({ onUpdateSearch, currentSearch }) => {
  return (
    <TextInput
      placeholder="输入搜索内容..."
      value={currentSearch} // 绑定父组件的状态，成为受控组件
      onChangeText={onUpdateSearch} // 输入变化时直接调用父组件的回调
    />
  );
};

export default SearchBarComponent;

可选：子组件自己维护状态（如果需要） #

如果你子组件内部需要用到搜索值做其他处理，可以在子组件里也维护一个状态，同时同步给父组件：

import React, { useState } from 'react';
import { TextInput } from 'react-native';

const SearchBarComponent = ({ onUpdateSearch, currentSearch }) => {
  const [localSearch, setLocalSearch] = useState(currentSearch);

  const handleInputChange = (text) => {
    setLocalSearch(text);
    // 同步给父组件
    onUpdateSearch(text);
  };

  return (
    <TextInput
      placeholder="输入搜索内容..."
      value={localSearch}
      onChangeText={handleInputChange}
    />
  );
};

export default SearchBarComponent;

为什么这样可行？ #

这种方式本质是状态提升：把需要在多个组件间共享的状态（这里的search）放到它们的共同父组件中，然后通过props传递状态和更新函数，让子组件可以触发父组件的状态更新，从而实现组件间的状态同步。

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