Reactjs - 修改状态和更改 URL onChange

Question

我正在尝试更改<Input type='select'> 上的state 和URL onChange。 （我正在使用 reactstrap）

import React, {Component} from 'react'
import {
    Input,
} from 'reactstrap'

export default class NewPostComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selected: '',
        }
    }

    handleChange(event) {
        this.setState({
            selected: event.target.value,
        })
    }

    render() {
        return (
            <Input type='select' onChange={(e) => handleChange(e)}>
                <option>option 1</option>
                <option>option 2</option>
                <option>option 3</option>
                <option>option 4</option>
            </Input>
        )
    }
}

我正在更改state，但问题在于更改URL。我试过props.history.push 但在handleChange 中如下：

handleChange(event) {
    this.setState({
        selected: event.target.value,
    })
    this.props.history.push(`/${this.state.selected}/new/`)
}

这是我得到的错误

未捕获的类型错误：无法读取未定义的属性“推送”

console.log(this.props.history) 是undefined。

我只需要在setState 发生后更改URL。

Answer 1

history 属性仅传递给分配给Route 组件的组件。

{/* The Login component will get the history prop */}
<Route path="/login" component={Login} />

如果您希望在不直接用于Route 的组件中使用route props，您可以使用withRouter。

由于setState 是异步的，您可以在对setState 的回调中推送到history，以确保在更改url 之前状态已更改。

class NewPostComponent extends Component {
    state = {
        selected: ''
    }

    handleChange(event) {
        this.setState({
            selected: event.target.value,
        }, () => {
            this.props.history.push(`/${this.state.selected}/new/`)
        })
    }

    render() {
        return (
            <Input type='select' onChange={(e) => handleChange(e)}>
                <option>option 1</option>
                <option>option 2</option>
                <option>option 3</option>
                <option>option 4</option>
            </Input>
        )
    }
}

export default withRouter(NewPostComponent)