reactjs 禁用浏览器对材质-UI文本字段的自动完成

3j86kqsm  于 2022-12-26  发布在  React
关注(0)|答案(2)|浏览(114)

我正在使用Material UI的国家/地区选择(https://material-ui.com/components/autocomplete/#country-select)。我遇到了一个持续的问题,即当用户单击输入时,浏览器自动完成弹出窗口会阻止查看国家/地区选项。我已经尽了最大努力关闭自动完成,但没有成功。有人能建议一个可行的解决方案吗?
尝试了3种常见的建议修复方法:
第一个月
autoComplete="no"
autoComplete="new-password"

return (
    <Autocomplete
      id="country-select"
      options={options}
      classes={{
        option: classes.option,
      }}
      autoHighlight
      getOptionLabel={(option) => option.label}
      onChange={(e, value) => setFieldValue(field.name, value.label)}
      onOpen={field.onBlur}
      renderOption={(option) => (
        <React.Fragment>
          <span>{countryToFlag(option.code)}</span>
          {option.label}
        </React.Fragment>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label={props.label}
          name={props.name}
          placeholder={props.placeholder}
          variant="outlined"
          helperText={_renderErrorText()}
          error={hasError}
          autoComplete="off"
        />
      )}
    />
  );
afdcj2ne

afdcj2ne1#

这是我的工作

autoComplete="chrome-off"
pod7payv

pod7payv2#

自动完成应该在由material-ui呈现的Input上,而不是在TextField Package 器上。所以你应该做如下的事情:

<TextField
    {...params}
    label={props.label}
    name={props.name}
    placeholder={props.placeholder}
    variant="outlined"
    helperText={_renderErrorText()}
    error={hasError}
    inputProps={{
        autoComplete: 'new-password',
    }}
/>

相关问题