根据输入在 React 中构建动态 URL

Question

我有一个项目列表，我想过滤它们。

为了做到这一点，我有一个如下所示的过滤组件：

[ text input "item name" ] [ dropdown "item category" ] [ date picker ]

我将 React 与 Redux、react-redux 和 react-router 一起使用。我的组件中没有“过滤器”，我希望在我输入时过滤项目。

首先我不确定我应该如何动态创建 URL，例如，如果您在第一个输入中键入“Abc”，我希望当前 URL 为：

http://example.com/currentPage?filter=Abc&category=&dates=

当我键入时，我希望 URL 不断变化，因此 URL 实际上是在我键入/从下拉列表/日期选择器中选择选项时构建的。我如何使用 React Router 实现这一点？

谢谢

Answer 1

这很简单。只需将 onChange 函数添加到您的输入字段。如下所示。

import React from 'react';

class Filter extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      filter: '',
      category: '',
      dates: '',
    }
  }

  handleChange(evt) {
    this.setState({
      filter: evt.target.value,
    }, () => {
      this.props.fetchFilteredItems(`http://example.com/currentPage?filter=${this.state.filter}&category=${this.state.category}&dates=${this.state.dates}`); // I assumed fetchFilteredItems comes from redux as an action.
    });
  }

  render() {
    return (
      <div>
        <input onChange={this.handleChange} />
        <YourDropdown />
        <YourDatePicker />
      </div>
    );
  }

}

希望这能解决您的问题。