The Old County The Old County - 1 year ago 399
React JSX Question

Reactjs - antd table filter as a react class

I am trying to create an antd table as a react class instead of a component, although I am running into syntax errors.

Line 170: 'state' is not defined no-undef
Line 179: 'onInputChange' is not defined no-undef
Line 183: 'onSearch' is not defined no-undef
Line 232: 'renderTable' is not defined no-undef
Line 283: 'renderTable' is not defined no-undef


I am trying to import the "custom filter panel" demo
https://ant.design/components/table/#components-table-demo-custom-filter-panel

Do I need to place things into a constructor on this class? Use a different function notation instead of the arrows?



var ProfileUserTable = React.createClass({
render: function () {

state = {
filterDropdownVisible: false,
data,
searchText: '',
filtered: false,
};



onInputChange = (e) => {
this.setState({ searchText: e.target.value });
}

onSearch = () => {
const { searchText } = this.state;
const reg = new RegExp(searchText, 'gi');
this.setState({
filterDropdownVisible: false,
filtered: !!searchText,
data: data.map((record) => {
const match = record.name.match(reg);
if (!match) {
return null;
}
return {
...record,
name: (
<span>
{record.name.split(reg).map((text, i) => (
i > 0 ? [<span className="highlight">{match[0]}</span>, text] : text
))}
</span>
),
};
}).filter(record => !!record),
});
}


const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
}, {
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
}];


renderTable = () => {
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterDropdown: (
<div className="custom-filter-dropdown">
<Input
ref={ele => this.searchInput = ele}
placeholder="Search name"
value={this.state.searchText}
onChange={this.onInputChange}
onPressEnter={this.onSearch}
/>
<Button type="primary" onClick={this.onSearch}>Search</Button>
</div>
),
filterIcon: <Icon type="smile-o" style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />,
filterDropdownVisible: this.state.filterDropdownVisible,
onFilterDropdownVisibleChange: (visible) => {
this.setState({
filterDropdownVisible: visible,
}, () => this.searchInput.focus());
},
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [{
text: 'London',
value: 'London',
}, {
text: 'New York',
value: 'New York',
}],
onFilter: (value, record) => record.address.indexOf(value) === 0,
}];

return <Table columns={columns} dataSource={this.state.data} />;

}


return (
<div className="component-container">

{renderTable()}

</div>
);
}
});



ReactDOM.render(<ProfileUserTable/>, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>




Answer Source

Yes, you are missing many things.

The demo uses ES6 React classes with arrow functions so you will need babel and transform-class-properties plugin or stage-2

To make it work with React.createClass you will need to convert the demo code into proper createClass style with ES5. eg:

Line 170: 'state' is not defined no-undef

Means you haven't properly set the state also the state object should not go inside of render, it should got to getInitialState()

Line 179: 'onInputChange' is not defined no-undef

the function onInputChange is declared with arrow functions, you should convert to normal js function.

eg.

var SayHello = createReactClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },

  handleClick: function() {
    alert(this.state.message);
  },

  render: function() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
});

This question is more about React with es5 vs es6 I would suggest you read their differences: https://reactjs.org/docs/react-without-es6.html

https://toddmotto.com/react-create-class-versus-component/#state-differences

Last, createClass is deprecated

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download