ReactJS с ReactRedux: Реализация поиска для запроса списка элементов - PullRequest
Новая
       11

ReactJS с ReactRedux: Реализация поиска для запроса списка элементов

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

Чтобы установить некоторый контекст: у меня есть API, который возвращает массив пар ключ / значение.Я хочу добавить функцию, которая отображает каждый ключ / значение на веб-странице, когда он загружается (готово), и реализовывать «поиск» в этом списке с помощью текстового поля, где по мере ввода пользователями список сокращается только до соответствующих ключей.

Соответствующий код React выглядит следующим образом: 

var PropEntry = function PropEntry(p) {    
    var displayValue = React.createElement(
        "span",
        null,
        p.value
    );
    var valueMarkup = React.createElement(
        "div",
        null,
        React.createElement(
            "span",
            { className: "prop-value" },
            displayValue
        );
    return React.createElement(
        "div",
        { className: "prop-entry" },
        React.createElement(
            "label",
            null,
            p.name
        ),
        valueMarkup
    );
};

var ColsView = function ColsView(props) {
    var cols = props.streamCols;
    return React.createElement(
        "div",
        { className: "named-container" }, 
        React.createElement(
        "input",
        { type: "text", placeholder: "Search", onChange: <CallFunctionHere> }),
        React.createElement(
        "div",
        { className: "named-entries" },
        cols.map(function (col) {               
            return React.createElement(PropEntry, { name: col.Name, value: col.value });
        })
        )
    )
}

ColsView = ReactRedux.connect(function (state) {
    return { streamCols: state.streamCols };
})(ColsView);

Я пытаюсь добавить текстовое поле чуть выше списка, которое фильтрует этот список по типу пользователя (нажатие клавиши onChange).Каков был бы лучший способ сделать это?Я хотел бы избежать вызова API в другой раз, так как у меня уже есть полный список элементов.

Я должен также упомянуть, что я очень новичок в React, и я просто пытаюсь добавить в существующий файл .js функции, которые я не хочу переписывать полностью :)

1 Ответ

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

Вы, кажется, довольно близко!

Как часть вашего класса, определите функцию обратного вызова, которая может использоваться для обработки клика: 

handleChange = (event) => {
  // Get the value from the event
  const searchValue = event.target.value;

  // Save it to state
  this.setState({ searchValue });
}

Вы должны обновить определение поля поискачтобы вытащить его значение из состояния, чтобы React не стирал значение, если компонент перерисовывает: 

React.createElement(
  "input",
  {
    type: "text",
    value: this.state.searchValue;
    placeholder: "Search",
    // Note that we just pass the function here, we don't actually call it.
    // React will call it for us when an onchange event occurs for this element
    onChange: this.handleChange,
  }
);

Теперь, в вашем методе рендеринга, вы можете сделать фильтр на основе сохраненного значенияв состоянии: 

const regex = new RegExp(this.state.searchValue);
const filteredCols = Object.keys(cols)
  .filter(key => key.match(regex))
  .reduce((filtered, key) => {
    filtered[key] = cols[key];
    return filtered;
  }, {});

filteredCols.map(function (col) {               
  return React.createElement(PropEntry, { name: col.Name, value: col.value });
});

Как мы оба отметили, регулярное выражение, вероятно, не будет таким простым (это точное совпадение прямо сейчас), но это может быть решено в другом вопросе, если это необходимо.

...