Microsoft Edge распространяет выпадающее меню автозаполнения на следующий маршрут / страницу

Question

У меня есть следующий очень простой манекен ReactJS проект:

Source Code с предварительным просмотром:

https://stackblitz.com/edit/react-8rgbu7

где два компонента:

компоненты / адрес. js

import React from 'react';

class Address extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      address: '',
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.history.push('/email');
  };

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

  render() {
    return (
      <div style={{padding:'10px'}}>
        <form onSubmit={this.handleSubmit}>
          <h4>What is your street address? Example: 001 foo</h4>
          <span>these are some</span><br />
          <span>dummy lines</span><br />
          <span>on purpose</span><br /><br />
          <input type="text" name="address" onChange={this.handleChange} value={this.state.address} />
          <button type="submit">Next</button>
        </form>
      </div>
    )
  }
}

export default Address;

компоненты / электронная почта. js

import React from 'react';

class Email extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      email: '',
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.history.push('/');
  }

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

  render() {
    return (
      <div style={{padding:'10px'}}>
        <form onSubmit={this.handleSubmit}>
          <h4>What is your email address?</h4>
          <input type="text" name="email" onChange={this.handleChange} value={this.state.email} />
          <button type="submit">Next</button>
        </form>
      </div>
    )
  }
}

export default Email;

Моя проблема: В браузере Microsoft Edge (с остальными браузерами все в порядке), при переходе на следующий маршрут (в данном случае: Email.js) выпадающее меню автозаполнения из предыдущий маршрут (в данном случае: Address.js) все еще существует.

Есть идеи, как это исправить? (помните, что эта проблема только на Microsoft Edge)

Здесь у вас есть screencast, который вы можете легко увидеть:

Попробуйте это с Microsoft Edge: https://react-8rgbu7.stackblitz.io

Как вы можете заметить, isse равняется NOT, что выпадающее меню автозаполнения с входа на первой странице применяется к входу на вторая страница, BUT, выпадающий список автозаполнения на входе на первой странице застревает в браузере, даже когда первая страница (компонент React) отключена.

Здесь вы можете поиграть:

(предварительный просмотр с Microsoft Edge): https://react-8rgbu7.stackblitz.io

(source code): https://stackblitz.com/edit/react-8rgbu7

Спасибо заранее!

Answer 1

В функции handleSubmit попробуйте использовать window.location.href="/email"; для перенаправления на другую страницу:

  handleSubmit = (e) => {
    e.preventDefault();
    // this.props.history.push('/email');
    window.location.href="/email";
  };

Редактировать :

Есть еще одна опция, которую вы могли бы отключите функцию автозаполнения браузера Edge:

Затем, если вы хотите выполнить функцию автозаполнения, вы можете использовать компонент автозаполнения (например, Material-UI Autocomplete , React Autocomplete ).

Редактировать

Есть еще один способ, который может помочь вам: в адресе . js, удалите событие onSubmit тега <form> и замените кнопку Submit на общую кнопку. Затем используйте событие нажатия кнопки для обработки функции отправки.

После внесения изменений файл Address. js выглядит следующим образом:

import React from 'react';

class Address extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      address: '',
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.history.push('/email');
  };

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

  render() {
    return (
      <div style={{padding:'10px'}}>
        <form>
          <h4>What is your street address? Example: 001 foo</h4>
          <span>these are some</span><br />
          <span>dummy lines</span><br />
          <span>on purpose</span><br /><br />
          <input type="text" name="address" onChange={this.handleChange} value={this.state.address} />
          <button type="button" onClick={this.handleSubmit}>Next</button>
        </form> 
      </div>
    )
  }
}

export default Address;

Результаты локальных испытаний приведены ниже: