Question

我正尝试通过按钮的onclick功能重定向到新页面，但它没有重定向。

这是我的代码 -

import React from 'react'; 
import { withRouter } from 'react-router-dom'; 

class Pricing extends React.Component {
    constructor(props){
        super(props);
        document.title = "Pricing";
        this.setPlanId = this.setPlanId.bind(this);
    }

    setPlanId(p_id){
       localStorage.setItem('plan_id', p_id);
       //BrowserRouter.push('/do-payment');     
       this.props.history.push("/do-payment");
   }

    render(){                   
            return(
                <div>
                    <div className="pricing bottommargin clearfix">
                        <Link to="#" className="btn btn-danger btn-block btn-lg bgcolor border-color" onClick={this.setPlanId(somevalue)}>Contunue</Link>
                    </div>
                </div>
            );  
    }
}

export default Pricing;

请让我知道，我做错了什么。

Answer 1

第一个问题是：How to navigate dynamically using react router dom

的副本

更新问题的答案。

像这样写：

render(){                   
    return(
        <div>
            <div className="pricing bottommargin clearfix">
                <Link 
                      to="#" 
                      className="btn btn-danger btn-block btn-lg bgcolor border-color" 
                      onClick={() => this.setPlanId(somevalue)}
                >
                      Contunue
                </Link>
            </div>
        </div>
    );  
}

原因： onClick期待function，但您通过调用该函数来分配值，您无需调用该方法，只要用户调用该方法点击它。

像这样使用arrow function：

onClick={() => this.setPlanId(somevalue)}

或

onClick={this.setPlanId.bind(this, somevalue)}

并删除constructor之后的方法绑定，此后不再需要。

完整代码：

import { withRouter } from 'react-router-dom'; 

class Pricing extends React.Component {
    constructor(props){
        super(props);
        document.title = "Pricing";
    }

    setPlanId(p_id){
       localStorage.setItem('plan_id', p_id);    
       this.props.history.push("/do-payment");
   }

    render(){                   
            return(
                <div>
                    <div className="pricing bottommargin clearfix">
                        <Link to="#" className="btn btn-danger btn-block btn-lg bgcolor border-color" onClick={() => this.setPlanId(somevalue)}>Contunue</Link>
                    </div>
                </div>
            );  
    }
}

export default Pricing;

以编程方式使用react-router进行导航

1 个答案: