Question

我正在尝试设置一个简单的下拉菜单，当用户从选择菜单中选择其他项目时，该下拉菜单将启用不同的路线。

我用HOC withRouter（）包装了我的组件，我认为它将通过路由器传递所有道具。

当我单击每个选择选项时，都会提示道具是未定义的，我在这里错过了什么？

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class Dropdown extends Component {
  handleChange(e) {
    this.props.history.push(`/${e.target.value}`);
  }

  render() {
    return (
      <>
        <select name="" className="Dropdown" onChange={this.handleChange}>
          <option value="top">Top</option>
          <option value="new">New</option>

          <option value="best">Best</option>
        </select>
      </>
    );
  }
}

export default withRouter(Dropdown);

Answer 1

我认为您需要将handleChange方法显式绑定到this。尝试向Dropdown类添加构造函数，例如：

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);
  }

至少这是他们在此处的文档中所做的工作：https://reactjs.org/docs/handling-events.html

Answer 2

我认为您忘记绑定handleChange函数，因此可以在这种状态之后绑定功能

 constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this);
  }

或者您可以这样做

 <select name="" className="Dropdown" onChange={this.handleChange.bind(this)}>

或者您可以简单地做到这一点。

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

与withRouter一起使用时找不到props.history

2 个答案: