我在React Redux应用程序中有一个客户端页面列表。
它有三个主要组件 - 顶部的SearchClients,中间的TableHeader和客户端列表的客户端。
我的目的是能够点击每个标题名称并通过该列进行排序。一旦列是列表在排序上排序的列,将显示向上或向下的符号,您也应该能够点击该符号。
我已经拆分了" TableHeader"的一部分。组件成为自己的组件。
在我决定将一个子组件添加到TableHeader组件之前,它工作正常。
在控制台中,我收到以下错误。
未捕获的TypeError:无法读取属性' getHostNode'为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事件?
我错过了什么,它给了我这个错误,这个错误意味着什么 - 它没有过于描述性。