состояние компонента React.js не обновляется, когда браузер автоматически завершает имя пользователя

Question

У меня есть следующие компоненты в React:

class LoginForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {username: '', password: '', redirectToReferrer: false}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    const value = event.target.value; 
    const name = event.target.name; 

    this.setState({ 
     [name]: value 
    }); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    console.log('A name was submitted: ' + this.state.username); 
    Auth.authenticate(this.state.username, this.state.password,() => { 
     this.setState({ redirectToReferrer: true }) 
    }) 
    } 

    render() { 
    const { from } = this.props.location.state || { from: { pathname: '/' } } 
    const { redirectToReferrer } = this.state 

    if (redirectToReferrer) { 
     return (
     <Redirect to={from}/> 
    ) 
    } 

    return (
     <div> 
     <p>You must log in to view the page at {from.pathname}</p> 
     <form id='loginForm'> 
      <input type="text" name="username" onChange={this.handleChange} /> 
      <input type="password" name="password" onChange={this.handleChange} /> 
      <button onClick={this.handleSubmit}>Log in</button> 
     </form> 
     </div> 
    ) 
    } 
} 

Когда я использую браузер функцию автозаполнения (вместо того, чтобы печатать «Admin» Я введите «a» и пусть браузер заполняет остальные) состояние компонента не обновляется, и оно отправляет неверное значение. Когда я набираю имя пользователя/пароль вручную, он работает правильно. Как я могу это исправить? Это довольно распространенный случай использования ...

Answer 1

Похоже, что некоторые browsers have a bug.

Вы можете попытаться обойти его с Autofill polyfill:

polyfill огонь событие изменения, когда браузер автоматически заполняет поля формы