code

React는 자동 완성을 렌더링하지 않습니다.

codestyles 2020. 12. 27. 10:52
반응형

React는 자동 완성을 렌더링하지 않습니다.


반응을 렌더링하려면 어떻게해야합니까?

<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"

자동 완성이 제거됩니다.


정답을 읽었지만 여전히이 문제가있는 경우 (특히 Chrome에서) 클럽에 오신 것을 환영합니다 ... 그러니 내가 어떻게 해냈는지 확인하세요.

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

메모

  • form이 반드시 입력 요소의 직접 부모 일 필요는 없습니다.
  • 입력에는 이름 속성이 필요합니다.
  • 또한 React-Bootstrap <FormControl/>태그 (대신 <input/>) 와 함께 작동합니다.

Mozilla 문서 에 따르면 자동 완성 기능을 해제하려면 잘못된 값을 설정해야합니다. 일부 브라우저에서는 속성이 꺼짐으로 설정되어 있어도 자동 완성 제안이 계속 제공됩니다.

이것은 나를 위해 일했습니다 (react-bootstrap).

<FormControl
  value={this.state.value}
  autoComplete="nope"
  {...props}
/>

한 줄로 해결했습니다.

"changeHandler ()"및 구성 요소 상태에 권장되는 방법을 사용하는 경우 다음을 삽입하십시오.

changeHandler = (e) => {    
  if (!e.isTrusted) return;
  ... your code
}

changeHandler ()-Thing에 대한 추가 정보 :
https://reactjs.org/docs/forms.html#controlled-components


autoComplete = "none"-저에게 적합합니다.


@azium의 답변 외에도 태그 <input>안에 넣어야 작동합니다.<form>autoComplete


나는 사람들이 생각 해낸 모든 솔루션을 시도했지만 크롬은 여전히 ​​자동 채우기 중지를 거부합니다. 더 이상 잘못된 입력을 자동 채우기 시작했습니다.

이것은 내가 지금까지 본 것 중 가장 지연된 부작용입니다.

참조 URL : https://stackoverflow.com/questions/37503656/react-doesnt-render-autocomplete-off

반응형