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

Question

What I am trying to do is that when a user clicks on an option in the dropdown list, it acts as a filter and takes them to a page with the specific query params matching their filtering. In theory, when a user selects an option, it should use the target.value of that option to take them to that specific page. But when I click on the different options, it does nothing to the URL. It doesn't take the user anywhere, it just stays on the same page. If you manually type in those query params, it will take you to the needed page, but the method with this.props.history.push simply does nothing. And there are no errors that come up either. How can I make it take me to the needed page?

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',
    job: 'Programmer',
    id: 2
  },
  {
    name: 'Lola',
    age: 17,
    hobby: 'Loving Crickets',
    job: 'Designer',
    id: 3
  },
  {
    name: 'Jammy',
    age: 20,
    hobby: 'Inventing new words',
    job: 'Programmer',
    id: 4
  },
  {
    name: 'Amirjan',
    age: 17,
    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')
);

You can look at the entire project and fiddle with it on this stackblitz link.

Answer 1

You function definition is incorrect, Its function inside function..

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

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

you are declaring an anonymous function.