React Redux 通过函数从子组件到父组件传递参数 [英] React Redux passing parameters via functions from child components to parent

问题描述

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

I asked a question on this and I believe Dennis who answered the question gave the answer I thought was correct. I cant figure out how to pass variables back to the parent function correctly...

这是我要修复的代码.

子组件的子组件

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

First there is a child of a child component. This will set the sort direction of the list if you click on it. Its using "onSortDirectionChange" function and should set the sort direction by setting a variable "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>
  )
}

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

Click on the glyphicon next to the header name and it should change the direction of the list. Simple component.

子组件

它的父级，但ClientContainer"的子级是 TableHeaders.GlyphiconDirectionChange"位于该组件中，用于显示您可以单击的向上或向下字形...

Its parent, but the child of "ClientContainer" is TableHeaders. "GlyphiconDirectionChange" sits in this component to display the up or down glyphicon that you can click...

     <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} />

父组件

ClientContainer 是顶级组件(动作等将在稍后分离 - 为了简单起见，它们现在在那里).在这里，TableHeaders 显示如下:

ClientContainer is the top component (actions etc will be split off later - they are in there now for simplicity). In here TableHeaders is displayed as follows:

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

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

Note the second line is the function from the bottom component.

它指的是HandleSortDirection".

It is referring to "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)
}

问题如何在子组件的子组件"中设置变量并将它们移动到HandleSortDirection"函数.

Problem How do you set variables in the "child of a child component" and move them through to the "HandleSortDirection" function.

我收到错误

未捕获的类型错误:无法在字符串 'Descending' 上创建属性 'query'

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

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

I need the "searchParams" variable "sortDirection" to be set to either "Ascending" or "Descending" and be used correctly in my function..

如何将 sortDirection 变量正确传递给父级中的函数.

How do I pass my sortDirection variable correctly to the function in the parent.

推荐答案

如何在子组件的子组件"中设置变量并将它们移动到HandleSortDirection"函数中."

"How do you set variables in the "child of a child component" and move them through to the "HandleSortDirection" function."

您已经在这样做了，但您有一个错字.

You are already doing this but you have a typo.

values.query = values.query ||''

这一行有错误，因为 values 等于 'Descending'.您在此处从子组件的子组件传入一个字符串，并在回调链中向上传递，直到到达此处.

This line is erroring because values is equal to 'Descending'. You are passing in a string here from your child of child component, and it is being passed up the chain of callbacks til it gets here.

删除该行并将其替换为const direction = values;然后在 searchParams 中传递 direction 代替 sortDirection,.

Remove that line and replace it with const direction = values; and then pass direction in place of sortDirection, in searchParams.

这篇关于React Redux 通过函数从子组件到父组件传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！