Làm cách nào để tôi thực hiện phản ứng hiển thị nó?
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autocomplete="off"
{...field}/>
Câu trả lời:
Viết hoa "C" autoComplete. Điều này được đề cập trong tài liệu React:
https://facebook.github.io/react/docs/tags-and-attributes.html
Bạn nên đặt:
autoComplete="new-password"
Điều này sẽ xóa tự động hoàn thành
newbên trong tên. Tôi đặt tên cho nó bây giờ autoComplete="new-off"có ý nghĩa hơn một chút đối với tôi nếu nó không phải là trường mật khẩu và nó hoạt động tốt: D
Theo tài liệu của Mozilla , bạn phải đặt giá trị không hợp lệ để thực sự tắt tính năng tự động hoàn thành. Trong một số trình duyệt, các đề xuất tự động hoàn thành vẫn được đưa ra mặc dù thuộc tính được đặt thành tắt.
Điều này đã làm việc cho tôi (react-bootstrap):
<FormControl
value={this.state.value}
autoComplete="nope"
{...props}
/>
autocompletevà autofill? Bởi vì nó không hoạt động đối với tôi khi sử dụng Chrome. Nó tiếp tục tự động điền vào biểu mẫu với các giá trị trước đó được gửi với cùng một biểu mẫu.
Nếu bạn đã đọc câu trả lời chính xác mà vẫn gặp sự cố này (đặc biệt là trong Chrome), chào mừng bạn đến với câu lạc bộ ... vì vậy hãy kiểm tra cách tôi đã hoàn thành nó:
<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
Ghi chú
<FormControl/>thẻ React-Bootstrap (thay vì <input/>)autoComplete = "none" - phù hợp với tôi.
Không có giải pháp nào trong số này thực sự hoạt động trên Chrome 80.
Sau nhiều giờ thử nghiệm và gặp lỗi, bản hack rất lạ này đã làm việc với tôi:
autoComplete="none"vào từng <input>- Google bỏ qua autocomplete = "tắt" ngay bây giờ<form>hoặc<div> autoComplete="on". Đây phải là phần tử cuối cùng trong vùng chứa. Vì vậy, tôi đã thêm trường nhập sau vào cuối biểu mẫu của mình:<input
type="text"
autoComplete="on"
value=""
style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}}
readOnly={true}
/>
Địa ngục tự động hoàn thành của Chrome tắt bằng cách thêm thuộc tính mật khẩu mới.
autoComplete="new-password"
Trong hành động trông như thế này:
<input
type="password"
autoComplete="new-password"
/>
thảo luận thêm về:
Tôi đã giải quyết nó chỉ với một dòng:
Nếu bạn sử dụng cách được đề xuất với "changeHandler ()" và trạng thái thành phần, chỉ cần chèn:
changeHandler = (e) => {
if (!e.isTrusted) return;
... your code
}
Thông tin khác về thay đổi đóHandler () - Thing:
https://reactjs.org/docs/forms.html#controlled-components
Tôi cũng đã thử nhiều tùy chọn, nhưng cuối cùng những gì tôi làm là thay thế <form>thẻ bằng <div>thẻ và quản lý thủ công từng đầu vào mà tôi có trong biểu mẫu đó.
Đây là thông báo "Nó hoạt động trên máy của tôi"
Phiên bản Chrome 83.0.4103.116 và React. Có vẻ như mẹo hiệu quả với tôi là đặt nó vào bên trong biểu mẫu và thêm thuộc tính autoComplete . Lưu ý Nếu bạn thử điều này trên một ứng dụng không phản ứng, bạn sẽ phải thực hiện tự động hoàn thành với chữ C viết thường
<form autoComplete="off">
<input type="text" autoComplete="new-password" />
</form>
và
<form autoComplete="new-password">
<input type="text" autoComplete="new-password" />
</form>