Как заменить ссылки в REACT.js (пример таблицы antd) - PullRequest
0 голосов
/ 04 сентября 2018

Я пытаюсь применить этот пример к моему собственному коду, но кажется, что свойства "ref" в этой форме устарели. Может ли кто-нибудь помочь мне с этим кодом? Прямо сейчас я получаю "Не могу прочитать свойство 'focus' of undefined", при нажатии на фильтр

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',
}];

class App extends React.Component {
  state = {
    searchText: '',
  };

  handleSearch = (selectedKeys, confirm) => () => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  }

  handleReset = clearFilters => () => {
    clearFilters();
    this.setState({ searchText: '' });
  }

  render() {
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div className="custom-filter-dropdown">
          <Input
            ref={ele => this.searchInput = ele}
            placeholder="Search name"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={this.handleSearch(selectedKeys, confirm)}
          />
          <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
          <Button onClick={this.handleReset(clearFilters)}>Reset</Button>
        </div>
      ),
      filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
      onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
      onFilterDropdownVisibleChange: (visible) => {
        if (visible) {
          setTimeout(() => {
            this.searchInput.focus();
          });
        }
      },
      render: (text) => {
        const { searchText } = this.state;
        return searchText ? (
          <span>
            {text.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i')).map((fragment, i) => (
              fragment.toLowerCase() === searchText.toLowerCase()
                ? <span key={i} className="highlight">{fragment}</span> : fragment // eslint-disable-line
            ))}
          </span>
        ) : text;
      },
    }, {
      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={data} />;
  }
}

ReactDOM.render(<App />, mountNode);

код, который я пытаюсь выполнить https://hastebin.com/yipusowala.coffeescript

{
        title: 'Rider',
        key: 'rider',
        width: '25%',
        dataIndex: 'rider.name',
        filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
            <div className="custom-filter-dropdown">
                <Input
                    ref={(input) => { this.searchInput= input; }}
                    placeholder="Search name"
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={this.handleSearch(selectedKeys, confirm)}
                />
                <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>Search</Button>
                <Button onClick={this.handleReset(clearFilters)}>Reset</Button>
            </div>
        ),
        onFilter: (value, record) => record.rider.name.toLowerCase().includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
                setTimeout(() => {
                    this.searchInput.focus();
                });
            }
        },
        render: (text) => {
            const {userFilterText} = this.state.userFilterText;
            return userFilterText ? (
                <span>
                    {text.split(new RegExp(`(?<=${userFilterText})|(?=${userFilterText})`, 'i')).map((fragment, i) => (
                        fragment.toLowerCase() === userFilterText.toLowerCase()
                            ? <span key={i} className="highlight">{fragment}</span> : fragment // eslint-disable-line
                    ))}
                </span>) : text;
        }
    },

1 Ответ

0 голосов
/ 05 сентября 2018

Ваш код выглядит просто отлично
(кроме деструктуры этого объекта:
const {userFilterText} = this.state.userFilterText;
я думаю, это опечатка)

Я создал эту изолированную программную среду на основе описанного вами примера и ref для компонента <Input />, а также триггера .focus() - похоже, работает нормально. (проверьте консоль, и вы увидите, что Input ref регистрируется)

Надеюсь, это поможет:)

...