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

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 находится внутри метода рендеринга, он требует, чтобы переменная updateEmpInfo была определена где-то в методе рендеринга. Я пытаюсь получить ввод от пользователя и на основе его ввода установить значение всех свойств 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 в response-router v4?