Question

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

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

我使用了this个问题，但是当我没有语法错误时，它说：

未捕获的ReferenceError：未定义onSubmit

这是我目前的代码：

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)

}

在render函数中，我的TableHeaders组件呈现如下：

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

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

如何设置这两个值和

Answer 1

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

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

1 个答案: