Reactjs

Question

我正在尝试创建一个 antd table 作为反应 class 而不是组件，尽管我运行遇到语法错误。

  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

我正在尝试导入 "custom filter panel" 演示 https://ant.design/components/table/#components-table-demo-custom-filter-panel

我需要将东西放入此 class 的构造函数中吗？使用不同的函数符号而不是箭头？

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 1

是的，你错过了很多东西。

该演示使用带有箭头功能的 ES6 React 类，因此您将需要 babel 和 transform-class-properties 插件或 stage-2

要使其与 React.createClass 一起使用，您需要使用 ES5 将演示代码转换为正确的 createClass 样式。例如：

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

意味着你没有正确设置 state 状态对象也不应该进入渲染内部，它应该到达 getInitialState()

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

函数onInputChange是用箭头函数声明的，你应该转换成普通的js函数。

例如

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

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

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

这个问题更多是关于 React with es5 vs es6 我建议你阅读它们的区别： https://reactjs.org/docs/react-without-es6.html

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

最后，createClass is deprecated

Reactjs - antd table 过滤器作为反应 class

Reactjs - antd table filter as a react class

antd