Question

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

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

var myInt: Int? = 3
if (myInt != null) myInt++

我使用React与Redux，react-redux和react-router。没有＆＃34;过滤＆＃34;在我的组件中，我希望在输入时过滤项目。

首先，我不确定如何动态创建网址，例如，如果您输入＆＃34; Abc＆＃34;在第一个输入中，我希望当前的URL为：

public class Employee : INotifyPropertyChanged { private string _name; private string _organization; public string Name { get { return _name; } set { _name = value; RaisePropertyChanged("Name"); } } public string Organization { get { return _organization; } set { _organization = value; RaisePropertyChanged("Organization"); } } public event PropertyChangedEventHandler PropertyChanged; protected void RaisePropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } }

当我输入时，我希望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>
    );
  }

}

希望这能解决你的问题。

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

1 个答案: