React Redux 通过函数将参数从 child 组件传递到 parent

Question

我就此问了，我相信回答问题的丹尼斯给出了我认为正确的答案。我不知道如何正确地将变量传递回 parent 函数...

这是我要修复的代码。

Child 一个 Child 组件

首先有一个 child 的 child 组件。如果单击它，这将设置列表的排序方向。它使用 "onSortDirectionChange" 函数，应该通过设置变量 "sortDirection".

来设置排序方向

const GlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange } = props

  return (
    <span>
      {onSortDirectionChange === 'Ascending' ?
          <span onClick={() => onSortDirectionChange('Ascending')} className='glyphicon glyphicon-sort-by-attributes'></span>
        :
          <span onClick={() => onSortDirectionChange('Descending')} className='glyphicon glyphicon-sort-by-attributes-alt'></span>
      }
    </span>
  )
}

单击 header 名称旁边的字形图标，它应该会更改列表的方向。简单的组件。

Child分量

是parent，但是"ClientContainer"的child是TableHeaders。 "GlyphiconDirectionChange" 位于此组件中以显示您可以单击的向上或向下字形...

     <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} />

Parent 组件

ClientContainer 是顶级组件（操作等将在稍后拆分 - 为了简单起见，它们现在就在那里）。这里TableHeaders显示如下：

        <TableHeaders onSortByChange={this.handleSortBy}
        onSortDirectionChange={this.handleSortDirection}
        query={query}
        currentPage={currentPage}

注意第二行是底部组件的函数。

指的是"HandleSortDirection".

  handleSortDirection = (values = {}) => {
  const { sortDirection, query, sortBy  } = this.props
  values.query = values.query || ''
  const searchParams = {
    query,
    sortBy,
    sortDirection,
    ...values,
    currentPage: 1,
  }
  console.log('changeHeaders()!', values, searchParams)
  this.fetchClients(searchParams)
}

问题如何在 "child of a child component" 中设置变量并将它们移动到 "HandleSortDirection" 函数。

我遇到错误

Uncaught TypeError: Cannot create property 'query' on string 'Descending'

我需要将 "searchParams" 变量 "sortDirection" 设置为 "Ascending" 或 "Descending" 并在我的函数中正确使用..

如何将 sortDirection 变量正确传递给 parent 中的函数。

Answer 1

"How do you set variables in the "子组件的子组件”并将它们移动到 "HandleSortDirection" 函数。“

您已经这样做了，但是您打错了。

values.query = values.query || ''

此行出错，因为 values 等于 'Descending'。您正在从您的子组件的子组件传递一个字符串到这里，它被向上传递到回调链直到它到达这里。

删除该行并将其替换为 const direction = values; 然后在 searchParams.

中传递 direction 代替 sortDirection,

React Redux 通过函数将参数从 child 组件传递到 parent

React Redux passing parameters via functions from child components to parent

javascript

reactjs

redux

redux-form