当同一组件React JS中的路由更改时，表单值不变

是因为React中的组件重新渲染时，会重新初始化组件的状态。如果表单的值是保存在组件的状态中，那么在路由更改时，组件会重新渲染并重新初始化状态，导致表单的值被重置。

为了解决这个问题，可以使用React的生命周期方法和路由库提供的功能来保存和恢复表单的值。

一种常见的解决方案是使用React的componentDidUpdate生命周期方法。在该方法中，可以检查路由是否发生了变化，并根据需要更新表单的值。具体步骤如下：

在组件中定义一个状态变量来保存表单的值，例如formValues。
在componentDidUpdate方法中，比较当前的路由和上一个路由是否相同。可以使用路由库提供的方法来获取当前路由和上一个路由的信息。
如果路由发生了变化，根据需要更新formValues的值。可以使用路由参数或查询字符串来获取新的表单值。
在表单的输入元素中，将formValues作为值的来源，确保表单的值与状态同步。

以下是一个示例代码：

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

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formValues: {
        // 初始表单值
        // ...
      }
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      // 路由发生了变化
      const newFormValues = {
        // 根据新的路由信息更新表单值
        // ...
      };
      this.setState({ formValues: newFormValues });
    }
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      formValues: {
        ...prevState.formValues,
        [name]: value
      }
    }));
  };

  handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交
    // ...
  };

  render() {
    const { formValues } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="input1"
          value={formValues.input1}
          onChange={this.handleInputChange}
        />
        {/* 其他表单元素 */}
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default withRouter(MyForm);

在上述示例中，通过使用componentDidUpdate方法和路由库提供的location属性，我们可以在路由更改时更新表单的值。同时，通过在表单元素中使用formValues作为值的来源，确保表单的值与状态同步。

腾讯云相关产品和产品介绍链接地址：