如何将值传递给容器组件

Question

在我的待办事项应用程序中，我有两个选择器：

export const selectFilter = (state: RootState) => state.visibilityFilter
export const selectVisibleTodos = createSelector(
  [selectTodos, selectFilter],
  (todos: Todo[], filter : VisibilityFilters) => {
    switch (filter) {
      case VisibilityFilters.SHOW_ALL:
        return todos
      case VisibilityFilters.SHOW_COMPLETED:
        return todos.filter((todo) => todo.completed)
      case VisibilityFilters.SHOW_ACTIVE:
        return todos.filter((todo) => !todo.completed)
      default:
        return todos
    }
  }
)

export const selectByDescription = createSelector(
  [selectVisibleTodos, (state: RootState, searchText: string) => searchText],
  (todos: Todo[], value: string) => {
    return todos.filter((todo) => todo.title.includes(value))
  }
)

第二个选择器采用用户写入的值 (searchText)。我还有两个组件：

我的VisibleTodos.tsx（TodoList.tsx 的连接器）：

import { selectVisibleTodos } from '../features/filter/filterSlice'

const mapState = (state: RootState) => ({
  visibleTodos: selectVisibleTodos(state)
})

const mapDispatch = {
  onClickOnItem: todoDeleted
}

const connector = connect(mapState, mapDispatch)
type PropsFromRedux = ConnectedProps<typeof connector>

export interface TodoListProps extends PropsFromRedux {}
export default connector(TodoList)

还有TodoList.jsx 本身

import React, { useState } from 'react'
import TodoItem from './TodoItem'
import { TodoListProps } from '../../containers/VisibleTodos'
import { Todo } from './todoSlice'
import { RootState } from '../../app/store'

const TodoList = ({ visibleTodos, onClickOnItem }: TodoListProps) => {
  const [searchText, setSearchText] = useState<string>('')
  const onChange = (e : React.FormEvent<HTMLInputElement>) => setSearchText(e.currentTarget.value)

  return (
    <>
      {/* How i pass searchText to the VisibleTodos.tsx from here?*/}
      <input placeholder="Faça sua pesquisa" type="search" onChange={onChange} value={searchText} />
      <ul style={{listStyle: 'none'}}>
        {
          visibleTodos.map(
            (todo : Todo) =>
              <TodoItem todo={todo} key={todo.id} onClickProp={onClickOnItem}/>
          )
        }
      </ul>
    </>
  )

}

export default TodoList

我希望visibleTodos 只负责渲染列表，而不知道searchText 的值，但是我如何将searchText 值传递给VisibleTodos.tsx 连接器组件？

Answer 1

您可以通过以下方式进行操作。在 mapstate 中添加 searchText，在 TodoList.tsx 组件中解构。

import { selectVisibleTodos } from '../features/filter/filterSlice'

const mapState = (state: RootState,Ownprops:TodoListProps) => ({
  visibleTodos: selectVisibleTodos(state)
  searchText: selectSearchText(Ownprops.any props selector required.)
})

const mapDispatch = {
  onClickOnItem: todoDeleted
}

const connector = connect(mapState, mapDispatch)
type PropsFromRedux = ConnectedProps<typeof connector>

export interface TodoListProps extends PropsFromRedux {}
export default connector(TodoList)