Отправка данных формы с реагирующим маршрутизатором из компонента в другой

Question

У меня есть простая форма, в которую пользователь вставляет свою информацию, и я хочу отправить свою информацию другому компоненту, к которому я перехожу с помощью Router Link

FormulairePlayer. js

import React from 'react';
import { Button, Form, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class FormulairePlayer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            Age:'',
            Sexe:'Homme',
        };

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

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

    handleSubmit(event) {
        alert("L'utilisateur a était soumis " + this.state.value);
        event.preventDefault();
      }

    render() {
        return (
            <div>  
                <Form>
                    <Form.Group as={Col} controlId="formAge">
                        <Form.Label>Age</Form.Label>
                        <Form.Control type="number" name="Age" value={this.state.Age} onChange={this.handleChange} placeholder="Age" required="true" />
                    </Form.Group>

                    <Form.Group as={Col} controlId="formSexe">
                        <Form.Label>Sexe</Form.Label>
                        <Form.Control name="Sexe" as="select" value={this.state.Sexe} onChange={this.handleChange} >
                            <option selected value="Homme">Homme</option>
                            <option value ="Femme">Femme</option>
                        </Form.Control>
                    </Form.Group>

                    <Link to="/StartGame">
                        <Button variant="primary" type="submit" onClick={this.handleSubmit}>
                            Suivant
                    </Button>
                    </Link>
                </Form>

            </div>

        );
    }
}

Есть ли способ сделать это с помощью Router Link или я должен использовать другой метод?

Answer 1

Вы можете использовать компонент <Link /> для отправки данных в качестве реквизита при навигации между компонентами.

Обновление:

handleSubmitEvent(event) {
  alert("L'utilisateur a était soumis " + this.state.value);
  event.preventDefault();
  return (
  <Redirect
    to={{
      pathname: `/StartGame`,
      state: { age: this.state.age, sex: this.state.sex },
    }}
  />)
}

<Button variant="primary" type="submit" onClick={this.handleSubmit}>
  Suivant
</Button>;

И вы можете получить доступ к этому реквизиты в вашем компоненте навигации через this.props.location.state. Поскольку вы используете компонент на основе классов, вы можете получить к нему доступ в методе жизненного цикла и установить состояние при первоначальной визуализации компонента, например, так:

componentDidMount(){
console.log(this.props.location.state)
}