admin 管理员组

文章数量: 1086019

I am trying to change the state and URL onChange on a <Input type='select'>. (I am using 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>
        )
    }
}

I am changing the state but the problem es at changing the URL. I have tried props.history.push but in handleChange as follows:

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

This is the ERROR that I am getting

Uncaught TypeError: Cannot read property 'push' of undefined

console.log(this.props.history) is undefined.

I just need a way to change URL after setState occurs.

I am trying to change the state and URL onChange on a <Input type='select'>. (I am using 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>
        )
    }
}

I am changing the state but the problem es at changing the URL. I have tried props.history.push but in handleChange as follows:

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

This is the ERROR that I am getting

Uncaught TypeError: Cannot read property 'push' of undefined

console.log(this.props.history) is undefined.

I just need a way to change URL after setState occurs.

  • javascript
  • reactjs
  • url
Share Improve this question edited Jul 14, 2018 at 10:53 Sreekar Mouli asked Jul 14, 2018 at 10:34 Sreekar MouliSreekar Mouli 1,4425 gold badges27 silver badges50 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

The history prop is only passed to the ponents that are given to Route ponents.

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

You could use withRouter if you want the route props in a ponent that is not directly used for a Route.

Since setState is asynchronous, you can push to the history in the callback to setState to make sure the state has changed before you change the 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)

本文标签： javascriptReactjsmodifying State and changing URL onChangeStack Overflow

版权声明：本文标题：javascript - Reactjs - modifying State and changing URL onChange - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744086670a2531257.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。