반응을 렌더링하려면 어떻게해야합니까?
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autocomplete="off"
{...field}/>
답변:
대문자 "C" autoComplete. 이것은 React 문서에 언급되어 있습니다.
https://facebook.github.io/react/docs/tags-and-attributes.html
다음을 넣어야합니다.
autoComplete="new-password"
자동 완성이 제거됩니다.
new이름 내에서 인식하고 있습니다. autoComplete="new-off"암호 필드가 아니고 잘 작동하는 경우 좀 더 이해하기 쉬운 이름을 지정했습니다 . D
Mozilla 문서 에 따르면 자동 완성 기능을 실제로 해제하려면 잘못된 값을 설정해야합니다. 일부 브라우저에서는 속성이 꺼짐으로 설정되어 있어도 자동 완성 제안이 계속 제공됩니다.
이것은 나를 위해 일했습니다 (react-bootstrap).
<FormControl
value={this.state.value}
autoComplete="nope"
{...props}
/>
autocomplete하고 autofill? Chrome을 사용하는 경우 작동하지 않기 때문입니다. 동일한 양식으로 전송 된 이전 값으로 양식을 계속 자동으로 채 웁니다.
정답을 읽었으나 여전히이 문제가있는 경우 (특히 Chrome에서) 클럽에 오신 것을 환영합니다 ... 그러니 어떻게 수행했는지 확인하십시오.
<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
메모
<FormControl/>태그 와 함께 작동합니다 (대신 <input/>).이 솔루션 중 어느 것도 Chrome 80에서 실제로 작동하지 않았습니다.
몇 시간의 시행 착오 끝에 매우 이상한 해킹이 저에게 효과적이었습니다.
autoComplete="none"각각에 추가 <input>-Google은 이제 autocomplete = "off"를 건너 뜁니다.<form>또는<div> autoComplete="on". 컨테이너의 마지막 요소 여야합니다. 그래서 양식 하단에 다음 입력 필드를 추가했습니다.<input
type="text"
autoComplete="on"
value=""
style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}}
readOnly={true}
/>
autoComplete = "none"-저에게 적합합니다.
Chrome 자동 완성 지옥은 new-password 속성을 추가하여 해제됩니다.
autoComplete="new-password"
실제로는 다음과 같습니다.
<input
type="password"
autoComplete="new-password"
/>
더 많은 토론 :
한 줄로 해결했습니다.
"changeHandler ()"및 구성 요소 상태에 권장되는 방법을 사용하는 경우 다음을 삽입하십시오.
changeHandler = (e) => {
if (!e.isTrusted) return;
... your code
}
changeHandler ()-Thing에 대한 추가 정보 :
https://reactjs.org/docs/forms.html#controlled-components
"내 컴퓨터에서 작동합니다"입니다.
Chrome 버전 83.0.4103.116 및 React. 나를 위해 일한 트릭은 양식 안에 넣고 autoComplete 속성을 추가하는 것입니다. 알림 반응이없는 앱에서이 작업을 시도하면 소문자 C로 자동 완성해야합니다.
<form autoComplete="off">
<input type="text" autoComplete="new-password" />
</form>
과
<form autoComplete="new-password">
<input type="text" autoComplete="new-password" />
</form>
예, 여기와 다른 곳에서 제안 된 대부분은 2020 년 12 월에 실패했습니다.
양식 래퍼, 자동 완성을 "newpassword"(둘 다 작동하지 않음)의 "off"로 설정하고 onFocus를 사용하여 autoComplete를 사용하는지 확인하고 자동 완성은 아니지만 (대문자가 아님) 도움이되지 않았습니다.
결국 mscott2005 접근 방식은 저에게 효과가 있었지만 (+1) 다른 사람들에 대한 답변으로 게시하는 더 최소한의 예를 위해 조정했습니다.
양식이 필요하지 않으며 두 개의 입력 태그 만 있으면됩니다.
autocomplete = "off" 원하는 필드에
<input ... autoComplete="off" />
autocomplete = "on" 가짜 은신처에
<input
id="fake-hidden-input-to-stop-google-address-lookup"
autoComplete="on"
style={{ display: 'none'}}>
ID는 주석을 사용하지 않고 실제로 해킹이 무엇인지 문서화하는 데 가장 좋습니다.