Question

我正在尝试更改state上的onChange和 URL <Input type='select'>。（我正在使用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/`)
}

这是我得到的错误

未捕获的TypeError：无法读取未定义的属性“ push”

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} />

如果要将withRouter用于不直接用于Route的组件中，则可以使用route props。

由于setState是异步的，因此可以在回调history中将setState推送到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)，以确保状态在更改URL之前已更改。

WPF

React.js-修改状态并更改URL onChange

1 个答案: