React: Chrome 자동 완성이 제어 된 구성 요소의 값을 덮어 씁니다.

"값"소품 (예 : 어떤 크롬이 필드의 기본값 / 자리 표시 자로 보이는지) 필드의 삽입 된 값과 같습니다. 리 액트가 상태 변경시 값 소품을 업데이트 할 때, 우리가 입력하는 것과 일치하도록 기본값 / 자리 표시자를 기술적으로 변경합니다. 그러면 크롬은이 필드를 변경되지 않은 필드로보고 자동 채우기에 덮어 씁니다.

예를 들면. 이름 필드에 문자열을 입력하십시오 ... react는 입력 한 값으로 값 prop을 업데이트합니다. 이메일 자동 완성을 시도하면 이름 필드를 덮어 씁니다.

그러나 이름 필드에 문자열을 입력 한 다음 요소를 검사하고 이름 값 prop을 입력 한 문자열이 아닌 다른 문자열로 편집 한 다음 이메일 자동 완성을 다시 시도하십시오. 이번에는 덮어 쓰지 않습니다 .. . 값이 "기본값"값과 동일하지 않기 때문입니다.

또 다른 방법은 onChange, autocomplete = this.state.value 업데이트입니다. 그리고 크롬은 어떤 이유로이 필드를 자동 완성하지 않도록 인식합니다. (autocomplete = off는 작동하지 않습니다. 임의의 문자열이어야합니다.) 비어 있고 this.state.value가 비어 있으면 자동 채우기가 예상대로 필드에서 계속 작동합니다.

^^ 맞습니다. 다음은 onChange 제안을 사용한 작업 예제입니다. https://jsfiddle.net/epicfaace/9p17e2qx/29/

매우 흥미로운! 이것은 이전에 알지 못했던 입력에 대한 값 속성 / 속성을 동기화하는 부작용입니다 (감사합니다, @ mabeabe28).

value 속성이 value 속성과 동일한 경우 Chrome은 입력이 "변경되지 않은"것으로 간주하고 자동 완성 작업 중에 value 속성을 대체합니다.

다른 브라우저에서도 이것이 사실인지 궁금합니다.

자동 완성 문제를 추적하는 버그가 있어야한다고 생각하지만이 문서가 문서화되어 있는지 확실하지 않습니다. 또한 네이티브 및 React 접근 방식을 비교하는 요점을 만들었습니다.

https://codesandbox.io/s/01zr8pll00

value 속성이 value 속성과 동일한 경우 Chrome은 입력이 "변경되지 않은"것으로 간주하고 자동 완성 작업 중에 value 속성을 대체합니다.

이것은 # 13525 ( "값 속성에 입력 값 반영 중지")에 의해 적어도 부분적으로 해결 될 수 있습니다.