Question

我正在使用Griddle Component并尝试自定义Filter组件以满足要求。我收到Uncaught TypeError: this.props.onChange is not a function错误。我正在关注这个例子。 https://griddlegriddle.github.io/Griddle/docs/customization/ 这是组件。

列表组件：

class UserList extends React.Component {
render(){
const users = this.props.users;
return( 
<Griddle data={users} plugins={[plugins.LocalPlugin]} styleConfig={styleConfig} components={{Filter}} pageProperties={{pageSize: 5}}>
  <RowDefinition>
    <ColumnDefinition id="username" title="Username" className="" />
    <ColumnDefinition id="firstname" title="First Name" className="" />
    <ColumnDefinition id="lastname" title="Last Name" />
    <ColumnDefinition id="id" title="Action" customComponent={EditDeleteUser} />
  </RowDefinition>
</Griddle>
)
}
}export default UserList;

自定义Fiter组件：

import React from 'react';
import { browserHistory, Router, Route, Link, withRouter } from 'react-router';
class Filter extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
}  
onChange(e) {
 this.props.onChange(e.target.value);
}
render() {
 return (
            <div className="searchInput">
                <input 
                  type="text" 
                  className="form-control"
                  placeholder="search" 
                  onChange={this.onChange}
                />
                <label htmlFor="search" className="icon icon-1202" rel="tooltip" title="search"></label>
              </div> 
 )
}

Answer 1

我正在查看“这个”是什么......所以我想出了

    this.props.setFilter(e.target.value)

为我工作。

干锅过滤器组件定制

1 个答案: