将Recat LInk设置为Button，当点击按钮时调用该函数&后导航到另一个组件。

Question

我需要设置Link来导航另一个组件&同时我也想在同一按钮被点击时调用函数。

addValue(evt)
    {
      evt.preventDefault();
      if(this.state.value !=undefined)
      {
        alert('Your input value is: ' + this.state.value)
        localStorage.setItem('reg_no',this.state.value);
        alert(localStorage.getItem('reg_no'));

      }

    }

    render() { 
        return (
            <form onSubmit={this.addValue}>
            <input type="text" onChange={this.updateInput} placeholder="Enter Hospital Registration Number"/><br/><br/>
            <Button type="submit" value="Enter" onClick={()=>this.addValue}> Enter</Button>


            </form>
          );
    }

这是我的反应代码。我想把Link设置为Enter按钮。假设我想通过url'homeurl'来加载'Home'组件，我该怎么做？

Answer 1

尝试使用React-router重定向方法。

import { Redirect } from "react-router-dom";

然后用一个状态道具来标识你的点击操作已经完成，就像这样。

state = {
    open:false;
    }
addValue(evt)
{
  evt.preventDefault();
  if(this.state.value !=undefined)
  {
    alert('Your input value is: ' + this.state.value)
    localStorage.setItem('reg_no',this.state.value);
    alert(localStorage.getItem('reg_no'));
this.setState({open:true});
  }

}

render() { 
    return (
        <form onSubmit={this.addValue}>
    {this.state.open? (
    <Redirect
          to={{
            pathname: "/home"
          }}
    ):null}
        <input type="text" onChange={this.updateInput} placeholder="Enter Hospital Registration Number"/><br/><br/>
        <Button type="submit" value="Enter" onClick={()=>this.addValue}> Enter</Button>


        </form>
      );
}