动态传递参数到 react-router-dom 链接答案

【问题标题】：Passing Parameters to react-router-dom Link Dynamically动态传递参数到 react-router-dom 链接
【发布时间】：2020-07-11 11:25:00
【问题描述】：

我正在开发一个 React 项目，在其中一个组件中，我通过 react-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>

我的问题是专门关于“状态”属性的。如您所见，我传递了几个状态参数（id、name、department 和gender）。由于 Link 组件位于 render 方法中，因此需要在 render 方法中的某处定义 updateEmpInfo 变量。我正在尝试从用户那里获取输入，并在组件渲染后根据他们的输入设置所有 updateEmpInfo 属性的值。所有这些都将传递给 Link 的 state 属性。我试图在 getEmpInfo 函数中这样做。但是，无论输入如何，state 属性都会保留在渲染期间设置的所有初始值。单击链接后，是否可以根据用户输入更改 updateEmpInfo 属性？我的问题很清楚。我很乐意提供任何其他信息。提前谢谢！

【问题讨论】：

标签： reactjs react-router react-link

【解决方案1】：

如果我理解正确，传递的值并不是用户调整它们的方式。我想这是 InputFields 缺少的 onChange-Listener 或整个表单的 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);

见这里Get form data in ReactJS， How to pass params with history.push/Link/Redirect in react-router v4?

【讨论】：