Компонент, управляемый реакцией, не автозаполняется в Firefox

Question

При использовании управляемого входа в Реагирование функция автозаполнения не работает в Firefox, но она работает в Chrome. Таким образом, это не имеет ничего общего с автозаполнением атрибута в элементе формы, поскольку я не использовал его.

Это код, я использую, чтобы сделать управляемый элемент ввода:

<input style={inputStyle} id={this.props.id} type={this.props.type} placeholder={this.props.placeholder} value={this.props.value} onChange={this.props.onChange} /> 

И это функция OnChange, которая передается в этот компонент из родительского компонента (для поля электронной почты):

_updateEmail(event) { 
    this.setState({email: event.target.value.substr(0, 100)}); 
} 

И вот 2 скриншота, чтобы показать, что он не работает в Firefox, но работает в Chrome.

Chrome:

Firefox:

Если я включаю управляемый вход в нормальный, он работает с Firefox. Так что это действительно странная часть.

Answer 1

Это известный issue в реактиве. Лучшим решением для решения проблемы является отключение автозаполнения или использование полифила auto-fill.

В качестве альтернативы, вы можете обрабатывать этот случай вне ReactJS и использования DOM напрямую, как описано в вопросе:

export default class Input extends Component { 
    static propTypes = { 
    value: PropTypes.string, 
    onFieldChange: PropTypes.func, 
    }; 

    static defaultProps = { 
    value: '', 
    } 

    componentDidMount() { 
    this._listener = setInterval(() => { 
     if (!this.input || this._previousValue === this.input.value) { 
     return; 
     } 

     this._previousValue = this.input.value; 

     const evt = document.createEvent('HTMLEvents'); 
     evt.initEvent('input', true, true); 
     this.input.dispatchEvent(evt); 
    }, 20); 
    } 

    componentWillUnmount() { 
    clearInterval(this._listener); 
    } 

    refInput = (input) => this.input = input; 

    render() { 
    const { label, 
     value, 
     onFieldChange, 
    } = this.props; 

    this.input = this.input || { value }; 

    return (
     <input 
      value={this.input.value} 
      onChange={onFieldChange} 
      ref={this.refInput} 
     /> 
    ); 
    } 
}