Установите Recat LInk на кнопку, когда нажатие кнопки вызывает функцию и после перехода к другому компоненту

Question

Мне нужно установить ссылку для навигации по другому компоненту, а также я хочу вызывать функцию при нажатии той же кнопки.

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>
          );
    }

Это мой код реакции. Я хочу установить ссылку на кнопку ввода. Как я это делаю? (предположим, я хочу загрузить компонент Home по url '/ homeurl'

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>
      );
}