Передача параметров в Act-router-dom Link динамически

Question

Я работаю над проектом React, в котором в одном из компонентов я передаю свойства другому компоненту через response-router-dom. Ссылка выглядит следующим образом:

let updateEmpInfo;

...

<Button component={Link}
        halfWidth
        variant="contained"
        color="primary"
        preventDefault
        onClick={getEmpInfo}
        to={{pathname: "/update",
        state:
           {id: updateEmpInfo.id,
            name: updateEmpInfo.name,
            department: updateEmpInfo.department,
            gender: updateEmpInfo.gender}
            }}>Update information
</Button>

Мой квестин касается именно состояния " имущество. Как видите, я передаю несколько параметров состояния (идентификатор, имя, отдел и пол). Поскольку компонент Link находится внутри метода render, он требует, чтобы переменная updateEmpInfo была определена где-то в методе render. Я пытаюсь получить ввод от пользователя и на основе его ввода установить значение всех свойств updateEmpInfo после того, как компонент рендерится. Все они будут переданы в государственную собственность Link. Я пытаюсь сделать это в функции getEmpInfo. Однако независимо от входных данных свойство состояния сохраняет все начальные значения, которые были установлены во время рендеринга. Есть ли способ изменить свойства updateEmpInfo на основе пользовательского ввода после нажатия на ссылку? Мне мой вопрос достаточно понятен. Я буду рад предоставить любую дополнительную информацию. Заранее спасибо!

Answer 1

Если я правильно вас понял, переданные значения отличаются от того, как их настраивал пользователь. Я бы предположил, что onChange-Listener отсутствует в InputFields или onSubmit для всей формы соответственно.

import { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyEmployeeForm extends Component {

constructor(props) {
    super(props);
    this.state = {
     id: "",
     name: "",
     department: "",
     gender: ""
    };
  }

  onChange = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }

onUpdate = (event) => {
    event.preventDefault();
    this.props.history.push({
    pathname: '/update', 
    state: this.state});
  }



render() {
    <form>
        <input type="text" name="id" placeholder="id" value={this.state.id} onChange={this.onChange} />
        <input type="text" name="name" placeholder="name" value={this.state.name} onChange={this.onChange}/>
        <input type="text" name="department" placeholder="department" value={this.state.department} onChange={this.onChange}/>
        <input type="text" name="gender" placeholder="gender" value={this.state.gender} onChange={this.onChange}/>
     </form>);

    <Button component={Link}
            halfWidth
            variant="contained"
            color="primary"
            onClick={this.onUpdate}>
            Update information
    </Button>
}

}

export default withRouter(MyEmployeeForm);

см. Здесь Получить данные формы в ReactJS, Как передать параметры с помощью history.push / Link / Redirect в реакции-маршрутизаторе v4?