React Router перенаправить после отправки формы с использованием входного значения - PullRequest
Новая
       5

React Router перенаправить после отправки формы с использованием входного значения

0 голосов
/ 02 октября 2018

Form.js

Я хочу получить из этой формы ссылку типа '/ search / inputValue /' , поэтому из другого компонента я могуизвлечь параметр.Вместо этого я получаю просто '/ search /' без входного значения. 

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

class Form extends React.Component {
    state = {
        searched: ''
    }

    onSubmit = (e) => {
        const keyword = e.target.elements.keyword.value;
        this.setState({ searched: keyword });
    }

    render(){
        return (
            <form className="form-inline" onSubmit={this.onSubmit}>
                <div className="form-group">
                    <input type="text" className="form-control" name="keyword" placeholder="Image keyword" />

                    <Link to={ `/search/${this.state.searched}`}>
                        <button className="btn btn-primary">Search</button>
                    </Link>
                </div>
            </form>       
        );
    }
};

export default Form;

Я заметил, что состояние обновляет свое значение после второй отправкис более старым входным значением , поэтому проблема может заключаться в следующем.

Это можно проверить, удалив тег Link, предотвращение утечек и консоль, чтобы записать входное значение.Первый пустой, а второй с предыдущим входным значением.

Все мое приложение отсортировано, мне просто нужно выяснить, как отправить ссылку со входа.

Router.js 

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from '../App';
import SearchPage from './SearchPage';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route path="/" component={App} exact />
            <Route path="/search/:keyword" component={SearchPage} />
        </Switch>
    </BrowserRouter>
);

export default Router;

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

Я думаю, вам не следует заключать кнопку отправки в Link.Но вы должны добавить e.preventDefault() в onSubmit() для предотвращения отправки формы и предотвращения перенаправления / обновления в браузере.

Вы должны добавить перенаправление непосредственно в конце метода onSubmit с помощьюAPI истории (https://reacttraining.com/react-router/web/api/history)

0 голосов
/ 02 октября 2018

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

Вам нужно было:

  • Привязать метод handleChange.Все методы, которые вы определили в объекте, переданном в React.createClass, будут автоматически связаны с экземпляром компонента.
  • Каждая мутация состояния будет иметь связанную функцию-обработчик.Это позволяет легко изменять или проверять пользовательский ввод.Вот почему у нас есть функция handleChange.
  • Поскольку атрибут value установлен в нашем элементе формы, отображаемое значение всегда будет this.state.value, что делает состояние React источником истины.Поскольку handleChange запускается при каждом нажатии клавиши для обновления состояния React, отображаемое значение будет обновляться по мере ввода пользователем данных.

Поскольку он фактически не отправляет форму, это правильный способ сделать это.Однако, если вы отправляете форму, отключите динамическую ссылку и используйте свойство действия формы. 

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

class App extends React.Component {
 /** Left some things in here commented out, 
     incase you start doing form submissions. Instead of a dynamic link.
  **/
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);

    /**  If you start submitting forms
    this.handleSubmit = this.handleSubmit.bind(this);  
    **/
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  /** If you start submitting forms, add onSubmit={this.onSubmit} to form action
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  } 
  **/

  render() {
    return (
    <div>
       <form className="form-inline">
                <div className="form-group">
                    <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control" name="keyword" placeholder="Image keyword" />

                    <Link to={`/search/${this.state.value}`}>
                        <button className="btn btn-primary">Search</button>
                    </Link>
                </div>
            </form>
      </div>
    );
  }
}

export default App;
...