主页 / 问题 / 935810
Accepted
Daniil Dubchenko
Asked:2020-01-24 01:58:30 +0000 UTC2020-01-24 01:58:30 +0000 UTC

反应路由器 - 导航到另一个组件时不要破坏组件

  • 772

react 上有一个表单和几个页面，如果用户开始填写表单然后转到另一个页面，则在表单componentWillUnmount组件上调用一个事件，并且该组件与所有填充的数据一起被删除。使用表格返回页面后，您将不得不再次填写所有内容。实际上是一个问题，如何防止通话componentWillUnmount或如何不丢失已输入的数据。

例如，我画了一个小的jsfiddle.net示例。在这里，如果我开始在组件的字段中输入数据Home，然后转到About，则返回时该字段将为空

class App extends React.Component {
  constructor(props) {
    super(props)

    this.Router = window.ReactRouterDOM.BrowserRouter ;
    this.Link = window.ReactRouterDOM.Link;
    this.Route = window.ReactRouterDOM.Route;
  }
  
  render() {
    return (
 <this.Router>
      <div>
        <ul>
          <li>
            <this.Link to="/">Home</this.Link>
          </li>
          <li>
            <this.Link to="/about">About</this.Link>
          </li>
        </ul>

        <hr />

        <this.Route exact path="/" component={Home} />
        <this.Route path="/about" component={About} />
      </div>
    </this.Router>
    )
  }
}

function Home() {
  return (
		<input type="text"/>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

javascript

1 个回答

  1. Best Answer

    像这样的东西，你需要的是在组件中Home：

    index.js

    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

    应用程序.js

    import React, { Component } from "react";
import { NavLink, Switch, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

export default class App extends Component {
  render() {
    return (
      <>
        <div>
          <NavLink exact to="/">
            Home
          </NavLink>
          <NavLink to="/about">About</NavLink>
        </div>
        <div>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
          </Switch>
        </div>
      </>
    );
  }
}

    主页.js

    import React, { Component } from "react";

let foo = { name: "" };

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = foo;
  }

  handleChange = e => {
    this.setState({ name: e.target.value });
  };

  componentWillUnmount = () => {
    foo = this.state;
  };

  render() {
    return (
      <input type="text" onChange={this.handleChange} value={this.state.name} />
    );
  }
}

    about.js

    import React, { Component } from "react";

export default class About extends Component {
  render() {
    return <h2>Hello from about</h2>;
  }
}

    PS链接到CodeSandBox（这里看结果比较方便）；

    PSS 代码不是按照你的例子，但是本质是一样的。

    PSS 如果您需要解释 - 写在评论中，我会在代码中添加评论

    • 1

相关问题