Question

我在React Redux应用程序中有一个客户端页面列表。

它有三个主要组件 - 顶部的SearchClients，中间的TableHeader和客户端列表的客户端。

我的目的是能够点击每个标题名称并通过该列进行排序。一旦列是列表在排序上排序的列，将显示向上或向下的符号，您也应该能够点击该符号。

我已经拆分了＆＃34; TableHeader＆＃34;的一部分。组件成为自己的组件。

在我决定将一个子组件添加到TableHeader组件之前，它工作正常。

在控制台中，我收到以下错误。

未捕获的TypeError：无法读取属性＆＃39; getHostNode＆＃39;为null

这是位于TableHeader组件中的GlyphiconDirectionChange组件：

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

  const { sortDirection } = props

  return (
    <span>
      {sortDirection === 'Descending' ?
        <span
          style={textLinkStyle}
          onClick={handleSubmit(values =>
            props.onSubmit({
              ...values,
              sortDirection: 'Ascending'
            }
            ))}
          className='glyphicon glyphicon-sort-by-attributes'>
        </span>
        :
        <span
          style={textLinkStyle}
          onClick={handleSubmit(values =>
            props.onSubmit({
              ...values,
              sortDirection: 'Descending'
            }
            ))}
          className='glyphicon glyphicon-sort-by-attributes-alt'>
        </span>
      }
    </span>
  )}

以下是我将其添加到TableHeader组件的位置：

export const TableHeaders = (props) => {
  const { handleSubmit } = props

  const { sortBy, sortDirection } = props

  return (
    <div>
      <div className="row">
        <div className="col-md-2" style={headingCellStyle}>
          <span
            style={textLinkStyle}
            onClick={handleSubmit(values =>
              props.onSubmit({
                ...values,
                sortBy: 'ClientNumber'
              }
              ))}>
            <span>Client # </span>
          </span>

          <GlyphiconDirectionChange sortDirection={sortDirection}/>

        </div>
        <div className="col-md-5" style={headingCellStyle}>
          <span>Name</span>
          {sortBy === 'LastName' && <span>
            {
              sortDirection === 'Descending' ?
                <span className='glyphicon glyphicon-sort-by-attributes'></span>
                :
                <span className='glyphicon glyphicon-sort-by-attributes-alt'></span>
            }
          </span>
          }
          <span> / Address </span>
          {sortBy === 'Suburb' && <span>
            {
              sortDirection === 'Descending' ?
                <span>
                  <span> - (sorted by Suburb) </span>
                  <span className='glyphicon glyphicon-sort-by-attributes'></span>
                </span>
                :
                <span>
                  <span> - (sorted by Suburb) </span>
                  <span className='glyphicon glyphicon-sort-by-attributes-alt'></span>
                </span>
            }
          </span>
          }

          {console.log(`SortBy ${sortBy} Sort Direction ${sortDirection}`)}
        </div>
        <div className="col-md-2" style={headingCellStyle}>Phone</div>
        <div className="col-md-1" style={headingCellStyle}>Jobs</div>
        <div className="col-md-2" style={headingCellStyle}>Actions</div>
      </div>
    </div>
  )
}
TableHeaders.propTypes = {
  onSubmit: PropTypes.func.isRequired,
}

const TableHeadersForm = reduxForm({
  form: 'TableHeaders',
})(TableHeaders)

export default TableHeadersForm

之前提到的TableHeader组件是这三个组件的第二个组件。作为客户端容器的一部分，它具有以下逻辑：

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

}

handlePageChanged = (pageIndex) => {
this.fetchClients({
  currentPage: pageIndex,
})

}

我正在使用

          onClick={handleSubmit(values =>
          props.onSubmit({
            ...values,
            sortBy: 'ClientNumber'
          }

要处理鼠标单击，然后通过props和onSubmit传递值。我相信我没有写过这个，或者可能是因为它没有在TableHeader组件中正确处理，因此在我的逻辑所在的客户端容器中....

在我的情况下，如何通过组件树来支持onClick事件？

我错过了什么，它给了我这个错误，这个错误意味着什么 - 它没有过于描述性。

Reactjs redux-form得到一个＆＃34; handleSubmit不是一个函数＆＃34;错误

0 个答案: