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')
);

您可以查看整個項目並在此 stackblitz 鏈接上進行修改。

Answer 1

你的函數定義不正確，它的函數內部函數..

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

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

您正在聲明一個匿名函數。