Завершение ссылки на реакционный маршрутизатор в HTML-кнопку в качестве опции отправки - PullRequest
Новая
       4

Завершение ссылки на реакционный маршрутизатор в HTML-кнопку в качестве опции отправки

0 голосов
/ 09 ноября 2018

Я пытаюсь обернуть ссылку реагирующего маршрутизатора в кнопку отправки. Я знаю, что есть эта опция: Завершение ссылки реагирующего маршрутизатора в HTML-кнопку , но она не обрабатывает саму отправку.

Я имею в виду нечто подобное: 

<button type='submit'>
  <Link to={{pathname : "/user/signup", search:"?page=sectionTwo"}} >
    CONTINUE
  </Link>  
</button>

Форма сама обрабатывается Formik, если это помогает.

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Я предполагаю, что у вас есть 

<form onSubmit={someFunction}> 
// Your submit button somewhere here
</form>

И вы хотите перенаправить пользователя на другую страницу, когда пользователь нажимает кнопку отправки. Я бы подошел к этому так, 

constructor(props) {
    super(props);
    this.state = { redirect: false }
}

handleSubmit() {
    // do some check before setting redirect to true
    this.setState({ redirect: true });
}

render() {
    // you could reset the this.state.redirect to false here before redirecting a user
    if (this.state.redirect) return <Redirect to='some url' />;
    else return (
         <div>
             <form onSubmit={this.handleSubmit.bind(this)}>
                 <button type='submit'> Continue </button>
             </form>
         </div>
    )
}

Идея заключается в том, что когда пользователь нажимает кнопку «Отправить», он обновляет состояние, повторно отображает компонент и проверяет, имеет ли значение перенаправление значение «истина», и в этом случае он перенаправляет пользователя на страницу. Я думаю, что неудобно переносить ссылку, которая не должна работать как кнопка -IMO.

0 голосов
/ 09 ноября 2018

Создайте обработчик onSubmit и внутри создайте переход на другую страницу: 

onSubmit = (value) => {
  const { history } = props;
  history.push('your link');
}

И не нужно использовать его Ссылка компонента

...