Question

我试图弄清楚如何开发搜索框。

我有这个数组passengersData，它来自redux存储。

我见过的所有有关React上搜索功能的示例都是基于本地状态，而搜索输入位于渲染数据数组所在的同一组件中。但是我需要将搜索框的值传递给子组件，然后该怎么做才能执行搜索？

这是子组件：

// imports

const PassengerCardBasedOnRoute = ({
  passengersData,
  searchParam,
}) => {
  return (
      <View>
        {passengersData &&
           passengersData.map(info => (
            <PassengersInfo
              key={info.id}
              searchParam={searchParam}
              name={info.name}
              callModal={popupsModalsActionHandler}
            />
          ))}
      </View>
  );
};

// Props validatiom

export default compose(
  connect(
    store => ({
      passengersData: store.homeScreen.passengersData,
    }),
    dispatch => ({
      popupsModalsActionHandler: data => {
        dispatch(popupsModalsAction(data));
      },
    }),
  ),
)(PassengerCardBasedOnRoute);

这是将保留搜索框的组件：

// imports
// CHILD COMPONENT
import PassengerCardBasedOnRoute from '../PassengerInfo/PassengerCardBasedOnRoute';

class AllPassengersList extends Component {
  state = { searchParam: '' };

  render() {
    const { searchParam } = this.state;
    return (
      <View>
        {isVisible && (
          <View>
            <TextInput
              onChangeText={text => this.setState({ searchParam: text })}
              value={searchParam}
            />
          </View>
        )}
        <PassengerCardBasedOnRoute searchParam={searchParam} />
      </View>
    );
  }
}

// Props validation

export default compose(
  connect(store => ({
    navigationStore: store.homeScreen.navigation,
    passengersData: store.homeScreen.passengersData,
  })),
)(AllPassengersList);

那么，根据我的代码，如何获取值以及在passengersData数组中执行搜索应该怎么做？

此外，如您所见，passengersData来自redux存储。

Answer 1

您可以执行两种选择来实现所需的目标。第一种是简单地增加您的map以包括一个过滤器。例如：

{passengersData && passengersData
 .filter(info => {
   // return true here if info matches the searchParam
 })
 .map(info => ( ...

另一种方法是将搜索参数从本地状态移动到redux，然后在响应于搜索参数被更改的动作中执行过滤器。为简单起见，我暂时选择第一个选项，但是如果事实证明您需要访问应用程序其他部分的搜索参数，或者执行更复杂的操作（例如优化渲染等），则可以移动搜索内容进入redux。

如何根据搜索条件返回新数组？

1 个答案: