Reactjs - фильтр таблицы antd как класс реакции

Я пытаюсь создать таблицу antd как класс реакции вместо компонента, хотя у меня возникают синтаксические ошибки.

  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

Я пытаюсь импортировать демонстрацию «настраиваемой панели фильтров» https://ant.design/components/table/#components-table-demo-custom-filter-panel

Нужно ли мне помещать что-то в конструктор этого класса? Использовать другое обозначение функции вместо стрелок?

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


reactjs antd
person The Old County    schedule 02.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, вы многое упускаете.

В демонстрации используются классы ES6 React со стрелочными функциями, поэтому вам понадобятся babel и transform-class- плагин properties или stage-2

Чтобы заставить его работать с React.createClass, вам нужно будет преобразовать демонстрационный код в правильный стиль createClass с помощью ES5. например:

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

Означает, что вы неправильно установили state, а также объект состояния не должен попадать внутрь рендеринга, он должен быть getInitialState()

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

функция onInputChange объявлена ​​со стрелочными функциями, вы должны преобразовать ее в обычную функцию js.

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>
    );
  }
});

Этот вопрос больше касается React с es5 и es6. Я бы посоветовал вам ознакомиться с их различиями: https://reactjs.org/docs/react-without-es6.html

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

Наконец, createClass устарел

person Yichaoz    schedule 02.10.2017
comment
Мне удалось исправить это, но как мне очистить это, чтобы получить данные от родителя - так this.props.data --- а также вставить его в onSearch - jsfiddle.net/0ht35rpb/189 - @Kossel - person The Old County; 02.10.2017
comment
Ну это может быть совсем другая тема. но обычно люди устанавливают Redux (или любую другую библиотеку flux) и сопоставляют функцию поиска и данные результатов из магазина с реквизитами. так что вы будете использовать реальные данные. - person Yichaoz; 02.10.2017
comment
- конечно - у меня работает redux - теперь он у меня настроен - так что он ближе к тому, чтобы заставить его работать как отдельный компонент - person The Old County; 02.10.2017