React: 制御されたコンポーネントでブラウザーのオートコンプリートされたフォーム値を処理する方法を提供します

これはもう少しそれを議論しているようです： http ：

atm私はこれを使用していますhttps://github.com/tbosch/autofill-event

cc me

（ @visionscaperのヒント：右側の列の[購読]を押してください。）

これに関する更新または提案されたベストプラクティスはありますか？ 自動入力イベントのポリフィルは、スレッジハンマーソリューションのようです。

Safari（8）は、自動入力時に変更イベントをディスパッチしますが、バブルしないため、reactハンドラーに到達しません。

https://github.com/angular/angular.js/issues/1460での関連するディスカッションは終了し、いくつかの提案がありました。そのうちの1つは、 https：//github.com/tbosch/autofill-eventを使用してます。自動入力のイベントを手動で変更します。

ここでも閉めることができると思います。

アドオンとして可能な、Reactの一部としてautofill-eventがあると便利です。 この機能は、フォームの検証にReactを使用するほぼすべての人に必要になります。 autofill-eventスクリプトは、jQueryの依存関係も追加しますが、これは多くの場合望ましくない場合があります。

これは、すべてのブラウザに少し異なる影響を与えるブラウザのバグです。 回避したり修正したりしようとして角度がパントしたからといって、反応する必要があるとは限りません。 これはよくあることですが、これが「不備」であるかどうかは理解しています。

私はさまざまなブラウザのバグトラッカーにあまり精通していませんが、この問題を見つけたり開いたりできる人がいたらいいのですが。 反応チームは、それに関する問題を開くときに、ほとんどのユーザーよりも重要だと思います。 そして、興味のある反応開発者のために、ここでチケットを引き付けることができます。

角のある糸に追いついた。 Firefoxにはパスワードフィールドに関する問題があり（https://bugzilla.mozilla.org/show_bug.cgi?id=950510はまだ開いています）、safariのバグ番号に関する情報はありません。chromeは修正されています。

問題はすでにいくつかの場所で追跡されています-https

Chromeの問題は解決されましたが、React0.14.8を搭載したChrome50では明らかに機能しません。

まだ修正はありませんか？

これはしばらくの間機能していて、最近また壊れたような気がしますか？

この問題に関する更新はありますか？

この問題に対する私の解決策の抜粋は次のとおりです。

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}
        />
    );
  }
}

注： valueは状態から取得され、 onFieldChangeは状態を新しい値で更新します

setIntervalコードはhttps://github.com/Pephers/react-autofillからのものです

この問題がiOS10.2で修正されたことを誰かが確認できますか？ 今は再現できません...

Chromeバージョン55.0.2883.79のiOS10.2でもまだ問題があります...ただし、上記の説明とは異なり、自動入力されたコンテンツがフォームで短時間点滅した後、再び削除されます。
そのため、状態に保存されているものと一致するようになりましたが、自動入力はまだ機能しません...

https://github.com/facebook/react/issues/8174

@irisSchafferで発生したのと同じ問題を再現しています。 私は同形のアプリケーションを持っています。そこでは、reactとexpressを使用して静的ページをレンダリングし、クライアントで小道具をエクスポートして同じページコンポーネントを使用します。

reactを介してパスワード入力値を処理しない場合でも、クライアントのreactコンポーネントは、chromeが短時間表示した場合でも、保存されたパスワードを入力から削除します。 ブラウザからJavaScriptを無効にすると、保存されたパスワードはそのまま残ります。

この問題は、最新バージョンの58を使用しているChromeでのみ発生します。

反応とは関係なく、保存されたパスワードは、フォーカスやキーイベントなど、domで発生するイベントが発生するまで、element.valueからアクセスできません。値の入力に運がなく、javascriptを介してイベントの発生をシミュレートしようとしました。プロパティ。

+1。 修正やハックはありますか？

iOS 10.3.3 Chrome60.0.3112.89でもこの問題に直面しています。

自動入力は機能し、フィールドに入力されますが、状態は変更されません。

デコレータの回避策： https ：

一般的なコンポーネントの回避策：

/**
  Trigger onChange event after browser auto-fill.

  <strong i="8">@see</strong> https://github.com/facebook/react/issues/1159
  <strong i="9">@example</strong> <AutoFillWatch component={ref =>
    <input required type="password" ref={ref} />
  }/>
*/
class AutoFillWatch extends Component {
  static propTypes = {
    // Auto-fill component like: <input type="password"
    component: PropTypes.func.isRequired,

    // component pass-through reference
    ref: PropTypes.func,
  }

  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);
    }, 100);
  }

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

  componentDidMount() {
    const {ref} = this.props
    if(ref) {
      console.log('ref', this.input);
      ref(this.input)
    }
  }

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

  render() {
    const {component} = this.props
    return component(this.refInput)
  }
}

Chrome for iOS（iOSキーボードからの提案ではなく、Chromeからの自動入力でテストすることを確認してください）は、値を自動入力するときにchangeのみを出力します。 一方、モバイルSafariはfocus 、 keydown 、 input 、 keyup 、 change 、 blur放出します。 MacでChromeとSafariを実行します。

Reactは通常の<input /> changeイベントを使用しません。これがこの問題の根本原因のようです： https ：

React onChangeをDOM changeイベントでもトリガーすることはできませんか？ その中に何か害はありますか？

Chrome iOSの関連する問題： https ：

次の小さなページで自動入力とイベントをテストしました。

<html>

<head>
  <script type="text/javascript">
    window.onload = function () {
      let elements = document.querySelectorAll('input');
      let actions = document.getElementById('actions')
      let events = 'focus blur keydown keyup change input'.split(' ');

      elements.forEach(element => {
        events.forEach(event => {
          element.addEventListener(event, e => {
            console.log(e);
            let eTypeNode = document.createTextNode(element.name + ' > ' + e.type + ":" + e.code + ":" + e.keyIdentifier);
            actions.appendChild(eTypeNode);
            actions.appendChild(document.createElement('br'));
          })
        })
      })
    };
  </script>
</head>

<body>
  <form>
    <input type="text" name="name" id="a" autocomplete="name" />
    <input type="email" name="email" id="b" autocomplete="email" />
    <input type="tel" name="tel" id="c" autocomplete="tel" />
  </form>
  <div id="actions"></div>
</body>

</html>

Chrome v62では、入力を<form />要素でラップすると、変更イベントが発行されます。

入力フィールドが変更された場合にその値を取得するonInputイベントハンドラーがあります。

iOSの自動入力では、ここでまだいくつかの異常な動作が見られます。 上記のreact-autofillデコレータは、単純な自動入力ではうまく機能するようですが、キーボードによって提供される自動入力ショートカットでは機能しません。

これは、Chrome for iOSで修正されるはずです： https ：

onChangeを使用する必要があるのはなぜですか？
「変更イベント」ではなく「onChange」を使用する必要があるのはなぜですか

class Input extends Component {
    componentDidMount(){
        this.input.addEventListener('change', (e)=>{
            this.props.onChange(this.props.field, e.target.value)
        })
    }
    render(){
        const { className, name, label, autofill, field, onBlur, onChange, value, error, visited, required, type, maxLength } = this.props
        return (
            <div className={ [styles.inputWrap, className || ''].join(' ') } onBlur={e => onBlur(field)}>
                <input ref={n => this.input = n} id={field} name={name || field} type={ type || 'text' } defaultValue={ value }
                 autoComplete={ autofill } maxLength={maxLength} />
                <div className={ [styles.placeholder, value? styles.active:''].join(' ') }>
                    <FormattedMessage id={label} />
                    <i className={styles.required}>{required? '*':''}</i>
                    <span className={ styles.error }>{ visited? error:'' }</span>
                </div>
            </div>
        )
    }
}

Chrome v62では、入力を<form />要素でラップすると、変更イベントが発行されます。

このソリューションがChromeで機能し、 autoComplete="tel"介して電話番号を自動入力することを確認しました
https://github.com/catamphetamine/react-phone-number-input/issues/101

this._previousValue !== this.input.valueを使用する上記のソリューション.valueは、自動入力後も空のままです。

制御されたコンポーネントを使用するときに、フォームの自動入力をどのように処理しているかわかりません。 このログインシナリオを検討してください。

• メールの自動入力：dispatchEventハックを使用しても何も変更されませんChromeはメール.valueを空として報告します
• パスワードフィールドに値を書き込み始めます：React状態が空であると見なすため、電子メールが失われます

Chromeに値を報告させる方法がない限り、制御されていないコンポーネント、html5入力検証、および昔のように送信時にフォーム値を取得する以外に、解決策は考えられません。

ここで問題を追跡（およびスター付け）できます： https ：

@DominicTobiasでも、上記のソリューションを機能させることができませんでした。 問題には複数の層があります。 1つ目は、 this.input.value常に空白として戻ってきたことです。 ただし、各ループでdocument.getElementByIdを使用すると、 document.getElementById(id).value -値が返されることがわかりました。

これはdispatchEvent問題を解決しませんが、少なくとも自動入力された値を取得し、それを使用して処理を実行できます（たとえば、制御された入力のonChangeハンドラーを呼び出すだけです）。

@wlingke知って

@wlingke Chromeの人たちのためにデモを設定するとき、私は何かに気づきました-これはChromeの問題ではありません。上記のコメント（特に@ oscar-bコメント）をもっと注意深く読むべきでした。 onChangeは、実際にはchangeイベントを使用しない、Reactの合成イベントであり、私にはかなり奇妙に思えます。

以下のデモでは、 inputイベントをリッスンしているように、動作が異なることがわかります。 実際のchangeイベントを使用すると、iOSChromeで正しく機能します。

したがって、要素への参照を取得して、実際の変更イベントと、状態を更新する必要がある場合はinputイベントのように見えるonChangeイベントをリッスンすることをお勧めします。ユーザーが入力しています。

デモ： https ：

@DominicTobias以前、 changeイベントとinputイベントの両方を別々に試したほか、そのデコレータで一度に両方を試しましたが、アプリで機能させることができませんでした。

また、これによって状況が変わるかどうかはわかりませんが、1つのフィールドを自動入力する場合と複数のフィールドを自動入力する場合には違いがあります。 inputイベントは、1つのフィールドを自動入力するときに正常に機能しました。 ただし、モバイルChromeでは、実際にはキーボードから一度に一連のフィールドを自動入力できます（名、姓、電子メールなど、すべて1回のタップで）。

その2番目のシナリオでは、デコレータは最初のフィールドの自動入力を適切に許可します（最初のフィールドは現在フォーカスされているフィールドを意味します）。 ただし、デコレータ（3つのフィールドすべてにアタッチされている）は、他のフィールドでは機能していないようです。

@wlingke興味深いことに、さらにいくつかのフィールドを追加しましたが、iOS Chromeで3つすべてを一度に自動入力すると、変更イベントがネイティブで正しく受信されます（ただし、以下のReactバージョンでは0）。

（スクリーンショットはデスクトップブラウザからのものですが、電話でも同じ結果が得られます）

@DominicTobias inputイベントを使用すると、以前使用したものであると思いますが、デスクトップで完全に機能します。 そして、モバイルでの最初の入力のために働きます。

inputイベントはreactのonChange最も近いです。 changeイベントは、要素が私が理解していることからフォーカスを失った後にのみファイルされます（https://stackoverflow.com/questions/17047497/what-is-the-difference-between-change-and-input-event-入力要素の場合）

うんreactは何らかの理由でonChangeto inputイベントにバインドされています：

したがって、物事を単純にするために、実際の変更イベント（および通常の入力イベント）のInputコンポーネントでも呼び出します。 現在、iOSChromeで動作しています。 それを試して、私に知らせてください！

componentDidMount() {
  this.inputRef.addEventListener('change', this.onChange);
}

onChange = (event) => {
  // React actually uses the input even for onChange, this causes autofill to
  // break in iOS Chrome as it only fires a change event.
  if (this.props.onChange) {
    this.props.onChange(event);
  }
}

componentWillUnount() {
  this.inputRef.removeEventListener('change', this.onChange);
}

編集：Chromeはv65で修正されているはずですが、それでも機能しないとの報告があります：/

ドミニクの説明ありがとうございます。 12月にその動作を修正しました。 キーダウン、変更、入力、キーアップの各イベントを発生させます。
https://chromium-review.googlesource.com/c/chromium/src/+/771674

Reactの修正もありました。
https://chromium-review.googlesource.com/c/chromium/src/+/844324

これにより自動入力の動作は修正されますが、onChangeハンドラーは呼び出されません。

私もこれに関する問題を提起し、開発者はそれが65で修正されると確信していました... https：//bugs.chromium.org/p/chromium/issues/detail？id = 813175

@DominicTobiasのようにネイティブのchangeイベントも聴いていますが、 onChangeをトリガーしています。

また、スタイリングにinput:-webkit-autofillセレクターを使用しています。

https://labrewlangerie.com （お問い合わせフォーム）の下部で結果を確認してください。

この修正がついにChromeiOSに導入されているようです。 ただし、これは12月1日に統合されたようであるため、どのバージョンかはわかりません。

https://bugs.chromium.org/p/chromium/issues/detail?id=705275#c11
https://chromium-review.googlesource.com/c/chromium/src/+/771674

https://chromium.googlesource.com/chromium/src/+/55518e17850cac0bdc6fca7b24092bea479e34db

https://storage.googleapis.com/chromium-find-releases-static/555.html#55518e17850cac0bdc6fca7b24092bea479e34db

それはすでに最新のクロムになっているはずです。 私はまだこの問題に直面しています（Angular5）。

Chrome 65、React15.6でも同じです。

それは残念です、Mahmadiはそれがv65で3月13日に起こっていたと言いました:(

コメント15by mahmadi @ chromium.org 、3月9日
修正はChrome64にはありません。私の悪い。 Chrome 65が必要になります（3月13日から展開予定）。 ネイティブイベントのデモウェブサイトをテストしたところ、Chrome65で動作します。フォローアップしていただきありがとうございます。

https://bugs.chromium.org/p/chromium/issues/detail?id=813175

携帯電話でここにアクセスして確認してみてください： //kind-stallman-f3c045.netlify.com/native.html

本当に奇妙なのは、v65ではネイティブに機能していることですが、Reactで受信されていなくても、入力を受け取っています。 さらに調査が必要です。reactがハンドラーをどのようにアタッチしているか（または、クリックハンドラーのようにドキュメント要素でそれを行っているかどうか）は正確にはわかりません。

ネイティブでは、入力イベントが現在発生しているのを見ることができます（https://kind-stallman-f3c045.netlify.com/native.html）：

しかし、どういうわけかReactはこれらのイベントを受信して​​いません（https://kind-stallman-f3c045.netlify.com）：

入力にonBlur = {this.handleChange}を追加します

KlarnaUIチームは、この記事で説明されているように、 onAnimationStartイベントと:-webkit-autofill疑似クラスを悪用してこの問題に対処するための興味深いハックを持っています-https

このハックをアプリケーションで使用しましたが、正常に機能します（Chromeでのみテストできます）。 このテクニックを使ってシムを考え出し、一般的なものにしようと思います。

この問題に関する最新情報はありますか？

さて、今のところ最高のトリックは何ですか？

@ericflo @sophiebits

この問題はまだ解決していないようですが、更新はありますか？

@ Pixelatex @ Aarbel私の答えをください-https

基本的に、ReactはonChangeのchangeイベントではなくinputイベントをリッスンするため、回答は両方をリッスンします。

@DominicTobiasこれを試しましたが、これを機能させるには、ページのどこかで実際にクリックする必要があります。 それまでイベントは登録されません。

合計で約1日、この問題に取り組んできました。 デスクトップChrome67とReact15.6.0で機能しないものを確実にリストできます。

1. onAnimationStartとinput:-webkit-autofill https://medium.com/@brunn/detecting -autofilled-fields-in-javascript-aed598d25da7-早期に起動します（フォームはまだ入力されていません）
2. this.inputRef.addEventListener("transitionend", this.doSomething, false)とinput:-webkit-autofill cssトランジションの組み合わせ-時間どおりに起動しますが、 アップすることはできません
3. this.inputRef.addEventListener("change", this.doSomething) -ページをクリックするまで起動しません
4. onBlur={this.doSomething} -イベントを発生させません

繰り返しますが、これらのソリューションは残念ながら機能しません。 ページを突く場合を除いて、HTMLには自動入力された値は含まれません。 コンソールにdocumentと入力すると、ページがウェイクアップするため、最も近いものは2ですが、これまでのところプログラムでこれは機能しませんでした。
@DominicTobiasソリューションはデスクトップChromeで機能しますか？

実際、私は汚いハックをしています。 前のコメントのソリューション2を使用する場合は、[保存されたフォームデータは有効なデータです] [ここに汚れがあります]を信頼できます。 次に、イベントの自動入力が完了した後の遷移をキャッチし、[送信]ボタンを有効にします。 方法は次のとおりです。

css：

input:-webkit-autofill {
    transition: background-color 0.1s ease-in-out 0s;
}

コンストラクター内：

this.autofillCompleted = this.autofillCompleted.bind(this)

React Componentクラス内：

componentDidMount(){
if(this.myInputRef)
      this.myInputRef.addEventListener("transitionend", this.autofillCompleted, false)
}
autofillCompleted(){
    this.setState({ submitActive: true });
}
componentWillUnmount(){
    if(this.myInputRef)
      this.myInputRef.removeEventListener("transitionend", this.autofillCompleted, false)
}

JSXの内部：

<FormControl
            inputRef={(node) => this.myInputRef= node}
/>

基本コンポーネント（ input ）のPSでは、 inputRef代わりにref小道具を使用します

最新のChromeデスクトップとiOS12 Safariでは、要素を<form>でラップすると、オートコンプリートがonChangeイベントを発行します。

@rxbを<p> </p>ラップしますか？

@basarat申し訳ありませんが、コードの<form>タグ

この問題に関する更新はありますか？

この問題に関する更新はありますか？

更新があった場合、それらはこの問題になります。

追加する意味のあるものがない場合は投稿しないでください。この問題を購読しているすべての人にスパムを送信しています。 ありがとう。

私もこれに関する問題を提起し、開発者はそれが65で修正されると確信していました... https：//bugs.chromium.org/p/chromium/issues/detail？id = 813175

残念ながら、この修正はReactチームと調整されていませんでした。 iOS上のChromeが、過去のバージョンで誤って変更ハンドラーをトリガーするプロパティを設定するようになったことに気づいていませんでした。 これをサポートすることは私たちの側では意図的ではありませんでした—そして私たちはすでに動作を削除する変更を加えました（Chromeがそれに依存し始めたことを私たちは知りませんでした）。

ブラウザで作業していて、React固有のハックを追加している場合は、必ずReactチームの誰かにループしてください。

誰かがこれを現在のバグに要約できますか？ Reactは、入力のchange inputイベントと

• 値は「レンダリング」前に自動入力されます。たとえば、反応が水和しているSSRページがありました。 その場合は正しい値を使用すると思います（cc @nhunzaker）
• 入力は自動入力でイベントを発生させません
• 入力は異なるイベントを発生させ、Reactはリッスンします（これはv15で解決されるはずです）

ここで見逃したことはありますか？また、どのブラウザーが正しく動作するか、または正しく動作しないかを誰かが知っていますか？

ところで、これを＃9657の一部と見なしたいと思います。理想的には、この問題の解決を支援するサービスに部分的に参加する必要があります。

@jquense正しい値を使用しますが、変更イベントは送信しません。

http://react-hydration.surge.sh/hydration

1. 「自動水和」のチェックを外します
2. 値を変更する
3. 水和物をクリックします
4. 変化なし ：（

わかりました、私も少し調査しました：

ここには2つの問題があると思います。

• Reactハイドレートが失われる前にブラウザによって入力された値。
• Chrome on IOSは、自動入力でイベントを発生させません

これがテストに使用できるサイトです： https ：

私が言えることから、他のすべてのプラットフォームとブラウザは、自動入力された値を選択するために正常に機能します

上記はgatsbyページであるため、SSRの問題も_また_示しています。

@nhunzakerあなたはIOSクロームケースについて賢いアイデアを持っていますか？ Vueがパントしたように見えますhttps://github.com/vuejs/vue/issues/7058

Reactはオートコンプリートをオフにしません

Chrome on iOSの問題について新しいChromeバグを報告しました： https ：

入力の「name」属性を定義しようとしましたか？ わたしにはできる。 onChangeは、ユーザーの自動入力時にトリガーされます

@eatsjobs attr名を使用していますが、同じ問題があります。

私はテストしました

$$(':-webkit-autofill')

Chrome 70で動作し、自動入力された入力を返します。

@QuantumInformationは私にとって同じです:(

handleOnChange = e => {
  this.setState({ email: e.target.value }, () => {
    alert(this.state.email)
  })
}

<form>
  <input
    name="email"
    type="email"
    placeholder="Enter Your Email"
    autocomplete="email"
    value={this.state.email}
    onChange={e => this.handleOnChange(e)}
   />
</form>

私はこの方法を試します、すべてがうまくいくように見えます。
オートフィルは私の状態を正しく設定しました。 （ios 12）

最近この問題に遭遇した人にとっては、セキュリティリスクを回避するためにブラウザによって意図的に引き起こされています。

ページが読み込まれたときに自動入力された値にアクセスできれば、フィッシングを目的としたフォームに情報を抽出する悪意のあるコードを非常に簡単に記述できるようになります。 ユーザーに反応する機会を与えません。 おそらく、 autocomplete="off"がブラウザによって無視される理由の一部です。

この問題を克服するには、次のことを行う必要があります。

1. DOMノードがマウントされたときに自動入力された値にアクセスできない（そして決してアクセスしない）という事実を受け入れます
2. ブラウザによって引き起こされるセキュリティ上の懸念を受け入れる

この問題を解決するために、フォームが元々どのように設計され、使用されることを意図していたかを思い出してください。 ユーザーがクリックすると、 <button type="submit" />内側<form> 、基本的に「今のは、フォームの値を評価してみましょう、ちょっとこのアクションは、ユーザが意図している」と言っています。

Reactで書かれた本当に単純なSignInFormのこの例を考えてみましょう。

import React from 'react';

class SignInForm extends React.Component {
  constructor() {
    this.state = {
      email: '',
      password: '',
    };

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmail(event) {
    this.setState({ email: event.target.value });
  }

  handlePassword(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit() {
   console.log(this.state.email); // The email value
   console.log(this.state.password); // The password value
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <input
            name="email"
            type="text"
            value={this.state.email}
            onChange={this.handleEmail}
            placeholder="Email"
          />
         <input
            name="password"
            type="text"
            value={this.state.password}
            onChange={this.handlePassword}
            placeholder="Password"
          />
          <button type="submit" onClick={this.handleSubmit}>Sign In</button>
        </form>
    );
  }
}

export default SignInForm;

送信すると、フォームはそれに応じて入力フィールドを更新および評価します。

これの意味は：

1. 送信ボタンを無効にすることはできません
2. ユーザーがこのボタンをクリックすると、すべての検証が行われる必要があります

私の意見では、これは最も実用的なアプローチであり、多くの頭痛の種を救うでしょう。 これが将来他の人に役立つことを願っています。

編集：Reactに慣れていない人のために、フォームの基本的な実装といくつかの追加のジューシーな情報については、このリンクを参照してください： https ：

最近この問題に遭遇した人にとっては、セキュリティリスクを回避するためにブラウザによって意図的に引き起こされています。

ページが読み込まれたときに自動入力された値にアクセスできれば、フィッシングを目的としたフォームに情報を抽出する悪意のあるコードを非常に簡単に記述できるようになります。 ユーザーに反応する機会を与えません。 おそらく、 autocomplete="off"がブラウザによって無視される理由の一部です。

この問題を克服するには、次のことを行う必要があります。

1. DOMノードがマウントされたときに自動入力された値にアクセスできない（そして決してアクセスしない）という事実を受け入れます
2. ブラウザによって引き起こされるセキュリティ上の懸念を受け入れる

この問題を解決するために、フォームが元々どのように設計され、使用されることを意図していたかを思い出してください。 ユーザーがクリックすると、 <button type="submit" />内側<form> 、基本的に「今のは、フォームの値を評価してみましょう、ちょっとこのアクションは、ユーザが意図している」と言っています。

Reactで書かれた本当に単純なSignInFormのこの例を考えてみましょう。

import React from 'react';

class SignInForm extends React.Component {
  constructor() {
    this.state = {
      email: '',
      password: '',
    };

    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleEmail(event) {
    this.setState({ email: event.target.value });
  }

  handlePassword(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit() {
   console.log(this.state.email); // The email value
   console.log(this.state.password); // The password value
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <input
            name="email"
            type="text"
            value={this.state.email}
            onChange={this.handleEmail}
            placeholder="Email"
          />
         <input
            name="password"
            type="text"
            value={this.state.password}
            onChange={this.handlePassword}
            placeholder="Password"
          />
          <button type="submit" onClick={this.handleSubmit}>Sign In</button>
        </form>
    );
  }
}

export default SignInForm;

送信すると、フォームはそれに応じて入力フィールドを更新および評価します。

これの意味は：

1. 送信ボタンを無効にすることはできません
2. ユーザーがこのボタンをクリックすると、すべての検証が行われる必要があります

私の意見では、これは最も実用的なアプローチであり、多くの頭痛の種を救うでしょう。 これが将来他の人に役立つことを願っています。

編集：Reactに慣れていない人のために、フォームの基本的な実装といくつかの追加のジューシーな情報については、このリンクを参照してください： https ：

要約をありがとう、しかし私は完全に混乱しています。 フォームを送信すると、「それに応じて更新」されるとのことです。 これは、送信イベントを発生させる前に、自動入力されたフィールドごとに追加の変更イベントを発生させることを意味しますか？ または、送信イベントが発生したときに、値が参照を介して読み取り可能になったことを意味しますか？ 前者の場合は、スニペットに示したようなコンポーネントを作成できます。 後者の場合は、フォームを前進させるために参照ベースのアプローチを採用する必要があります。

@thomasjulianstoelenどういう意味ですか？

@dwoodwardgb
私の経験では（少なくともChromeでは）、ユーザーがページを最初に操作したときのフィールド（クリック、フォームの送信など）を更新し、変更を加えてイベントを送信して、モデル変数を更新できるようにしました。 ただし、他のブラウザはまだテストしていません。

autocomplete = "off"属性（HTML5）を設定するか、入力値をURLハッシュに記録することができます。

この問題をもう少し掘り下げます。Chromiumは、このバグレポートに基づいて「変更」と「入力」の両方のネイティブイベントを発行するように変更しました： https ： onChangeイベントをトリガーしません。 これは、Reactの重複排除ロジック（https://github.com/facebook/react/issues/10135）、またはiOS上のChromeによってプログラムで発行されたイベントにisTrusted=falseフラグが付いているという事実に関連している可能性があります。

Reactチームの誰かがReact onChangeイベントハンドラーを詳しく調べて、イベントがトリガーされない理由を理解できますか？ @gaearonまたは@zpao （ランダムな推測）？

それまでの間、ネイティブの「入力」イベントを直接リッスンするonInputイベントを使用しています。

これが動作を壊したChromeのコミットだと思います：

https://chromium.googlesource.com/chromium/src/+/49bf3cbf7cc6d70643197a604090f8729f9d7404%5E%21/components/autofill/ios/fill/resources/fill.js

変更イベントからsimulatedフラグを削除します。これにより、重複排除ロジックがこれらのイベントを無視する可能性があります。

@nfiaccoのコミットは2018年からのもので、この問題は2014年に開かれたので、表面的には

2022年から帰ってきた