this.props.history.push 不适用于 onChange 方法

如何解决this.props.history.push 不适用于 onChange 方法

我想要做的是，当用户单击下拉列表中的选项时，它充当过滤器，并将它们带到具有与其过滤匹配的特定查询参数的页面。理论上，当用户选择一个选项时，它应该使用该选项的 target.value 将他们带到该特定页面。但是当我点击不同的选项时，它对 URL 没有任何作用。它不会将用户带到任何地方，它只是停留在同一页面上。如果你手动输入这些查询参数，它会带你到需要的页面，但是带有 this.props.history.push 的方法什么都不做。而且也没有出现错误。我怎样才能让它带我到需要的页面？

App.js -

import React from 'react';
import './style.css';
import { Route,Link,Switch } from 'react-router-dom';
import UserRoute from './components/User.js';
import SelectedAge from './components/SelectAge.js';
import SelectedJob from './components/SelectJob.js';

const users = [
  {
    name: 'Vasila',age: 16,hobby: 'Reading Trashy Romance Novels',job: 'Programmer',id: 1
  },{
    name: 'Sheravgan',age: 20,hobby: 'Speaking German',id: 2
  },{
    name: 'Lola',age: 17,hobby: 'Loving Crickets',job: 'Designer',id: 3
  },{
    name: 'Jammy',hobby: 'Inventing new words',id: 4
  },{
    name: 'Amirjan',hobby: 'Being amazing',job: 'Neurosurgeon',id: 5
  },{
    name: 'Mans',age: 18,hobby: 'Taking aesthetic pics',job: 'Unknown',id: 6
  }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.ageSelect = this.ageSelect.bind(this);
    this.jobSelect = this.jobSelect.bind(this);
  }

  ageSelect(e) {
    () => {
      this.props.history.push(`filter_age/${e.target.value}`);
    };
  }

  jobSelect(e) {
    () => {
      this.props.history.push(`/filter_job/${e.target.value}`);
    };
  }

  render() {
    return (
      <div>
        <Switch>
          <Route
            path="/"
            exact
            render={() => (
              <div>
                <h1>Our Users: </h1>
                <hr />
                <i>
                  <b>Filter by:</b>
                </i>
                <br />
                <select id="age" placeholder="Age" onChange={this.ageSelect}>
                  <option value="Age" selected disabled>
                    Age
                  </option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                </select>
                <select
                  style={{ margin: 10 }}
                  placeholder="Job"
                  onChange={this.jobSelect}
                >
                  <option value="Job" selected disabled>
                    Job
                  </option>
                  <option value="Programmer">Programmer</option>
                  <option value="Designer">Designer</option>
                  <option value="Neurosurgeon">Neurosurgeon</option>
                  <option value="Unknown">Unknown</option>
                </select>
                <button>
                  <Link to="/">Clear</Link>
                </button>
                <ul>
                  {users.map(user => (
                    <h3>
                      <li key={user.id}>
                        <Link to={'/user/' + user.id}>{user.name}</Link>
                      </li>
                    </h3>
                  ))}
                </ul>
              </div>
            )}
          />
          <Route path="/user/:id" component={UserRoute} />
          <Route path="/filter_age/:age" component={SelectedAge} />
          <Route path="/filter_job/:job" component={SelectedJob} />
          <Route path="*" component={App} />
        </Switch>
      </div>
    );
  }
}

index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,document.getElementById('root')
);

您可以查看整个项目并在 this stackblitz link.

解决方法

你的函数定义不正确，函数里面的函数..

ageSelect(e) {
  this.props.history.push(`filter_age/${e.target.value}`);
}

jobSelect(e) {
  this.props.history.push(`/filter_job/${e.target.value}`);
};

您正在声明一个匿名函数。