Блог

Главная - Вопросы по программированию - Я бы хотел, чтобы componentWillUnmount не монтировался, как перед загрузкой в React

Я бы хотел, чтобы componentWillUnmount не монтировался, как перед загрузкой в React

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я бы хотел выполнить beforeunload с помощью React, но я не могу. Например

 window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

Но я хочу сделать, как показано ниже

 componentWillUnmount: function(e) {
    var result = confirm('o/');
    if (!result) {
       // prevent unmount
    }
},

Комментарии:

1. В react вы не должны препятствовать размонтированию компонента, вместо этого вы должны инициировать проверку подтверждения в вашей библиотеке маршрутизации перед обновлением / переходом на другую страницу. Что вы используете для маршрутизации?

2. Я понимаю. Я использую маршрутизатор Ruby on Rails для маршрутизации.

Ответ №1:

Рабочий пример маршрутизатора React
вызывается как предотвращение перехода

 import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Prompt
} from 'react-router-dom'

const PreventingTransitionsExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Form</Link></li>
        <li><Link to="/one">One</Link></li>
        <li><Link to="/two">Two</Link></li>
      </ul>
      <Route path="/" exact component={Form}/>
      <Route path="/one" render={() => <h3>One</h3>}/>
      <Route path="/two" render={() => <h3>Two</h3>}/>
    </div>
  </Router>
)

class Form extends React.Component {
  state = {
    isBlocking: false
  }

  render() {
    const { isBlocking } = this.state

    return (
      <form
        onSubmit={event => {
          event.preventDefault()
          event.target.reset()
          this.setState({
            isBlocking: false
          })
        }}
      >
        <Prompt
          when={isBlocking}
          message={location => (
            `Are you sure you want to go to ${location.pathname}`
          )}
        />

        <p>
          Blocking? {isBlocking ? 'Yes, click a link or the back button' : 'Nope'}
        </p>

        <p>
          <input
            size="50"
            placeholder="type something to block transitions"
            onChange={event => {
              this.setState({
                isBlocking: event.target.value.length > 0
              })
            }}
          />
        </p>

        <p>
          <button>Submit to stop blocking</button>
        </p>
      </form>
    )
  }
}

export default PreventingTransitionsExample

Ответ №2:

Просто повторно смонтируйте компонент, возможно, в setTimeout .

 setTimeout(function() { browserHistory.push('/myComponent') }, 500);