this.props.history.push 在 onChange 方法中不起作用

Question

我想做的是，当用户单击下拉列表中的一个选项时，它充当过滤器并将他们带到一个页面，该页面具有与他们的过滤相匹配的特定查询参数。理论上，当用户选择一个选项时，应该使用该选项的 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',
    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')
);

您可以在 this stackblitz link.

上查看整个项目和 fiddle

Answer 1

你的函数定义不正确，它的函数在函数内部..

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

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

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

this.props.history.push 在 onChange 方法中不起作用

this.props.history.push not working in method for onChange

routes

onchange

browser-history

reactjs