React Router v для формы

Question

Как я могу использовать <Link> с <form>? Я пытаюсь избежать программной маршрутизации, поскольку вижу много предупреждений против нее.

Форма имеет два поля:

<form> 
    <input type="text" id="what"/> 
    <input type="text" id="where"/> 
    <Link><button type="submit"></Link> 
</form> 

Моя цель состоит, чтобы отправить страницу '/' + document.getElementById('where').value + '/' + document.getElementById('what').value, можно с v4 маршрутизатором?

Answer 1

С помощью v используется только для создания элементов <a>.

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

Кроме того, я бы выполнил маршрутизацию из компонента формы вместо кнопки. Затем вам нужно просто убедиться, что тип кнопки - submit (по умолчанию).

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

class NavForm extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     what: '', 
     where: '' 
    } 

    this.submitHandler = this.submitHandler.bind(this) 
    this.handleInput = this.handleInput.bind(this) 
    } 

    handleInput(event) { 
    const target = event.target 
    this.setState({ 
     [target.name]: target.value 
    }) 
    } 

    submitHandler(event) { 
    event.preventDefault() 
    // do some sort of verification here if you need to 
    this.props.push(`${this.state.where}/${this.state.what}`) 
    } 

    render() { 
    return (
     <form onSubmit={this.submitHandler}> 
     <input 
      type='text' 
      name='what' 
      value={this.state.what} 
      onChange={this.handleInput} /> 
     <input 
      type='text' 
      name='where' 
      value={this.state.where} 
      onChange={this.handleInput} /> 
     <button>Submit</button> 
     </form> 
    ) 
    } 
} 

export default withRouter(NavForm)