javascript - Redux-Form 通过多个按钮设置参数

Question

我在使用 Redux-Form 的组件中有多个标题。

我希望能够单击多个 header 名称并设置参数，然后通过获取重新加载页面。

我用过this问题，但虽然我没有收到语法错误，但它说:

Uncaught ReferenceError: onSubmit is not defined

这是我目前的代码:

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

    const { sortBy, sortDirection} = props

    return (
        <div>
        <div className="row">
            <div className="col-md-1" style={headingCellStyle}>
            <span onClick={handleSubmit(values => onSubmit({...values, sortBy: 'ClientNumber'}))}>Client # </span>
            {sortBy === 'ClientNumber' && <span>
                {
                sortDirection === 'Descending' ? 
                    <span className='glyphicon glyphicon-sort-by-attributes'></span>
                    : 
                    <span className='glyphicon glyphicon-sort-by-attributes-alt'></span>
                }
                </span>
                }  
            </div>
            <div className="col-md-6" 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: 'SearchClients',
    })(TableHeaders)

    export default TableHeadersForm

我的容器具有以下内容:

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

}

在渲染函数中，我的 TableHeaders 组件呈现如下:

 <TableHeaders onSubmit={this.changeHeaders}
        currentPage={currentPage}
        sortBy={sortBy}
        sortDirection={sortDirection}
      />

我想在用户单击标题时设置“sortBy”和“sortDirection”。

如何设置这两个值

Answer 1

您应该编写props.onSubmit而不是onSubmit。