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

Question

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

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

我已经使用了问题，但是当我没有遇到语法错误时它说：

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}
      />

我想在用户点击 header 时设置 "sortBy" 和 "sortDirection"..

如何设置这两个值和

Answer 1

你应该写 props.onSubmit 而不是 onSubmit.

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

Redux-Form setting parameters via multiple buttons

javascript

reactjs

redux-form