Question

我有一个非常简单的登录组件：

import React, {Component} from 'react'
import {observer, inject} from 'mobx-react'
import {Button, Header, Icon, Modal, Message} from 'semantic-ui-react'
import s from 'styled-components'

@inject('uiStore')
@observer
class Login extends Component {

  constructor(props) {
    super(props)
    this.state = {
      incorrectCredentials: false
    }
  }

  logIn() {

    const {username, password} = this.state

    if (username === '' && password === '') {
      this.props.uiStore.isLoggedIn = true
    } else {
      this.setState({incorrectCredentials: true})
    }
  }

  onInputChange = (event) => {
    const {name, value} = event.target
    //console.log(event.target.value, event.target.name)
    this.setState({[name]: value})
  }

  render() {

    const {incorrectCredentials} = this.state

    return (

      <Modal open={true}>
        <Modal.Content>
          <h3>Please log in to access the application</h3>
          {incorrectCredentials && <Message negative>
            <Message.Header>Incorrect credentials</Message.Header>
            <p>Please input the correct username and password and try again.</p>
          </Message>}
          <LoginStyle>

            <form>
              Username<br/>
              <input className='login-input' placeholder='Username' name='username' type='text' onChange={this.onInputChange}/>
              <br/>
              Password:<br/>
              <input className='login-input' id='password' name='password' type='password' onChange={this.onInputChange}/>
              <input type='submit'>Submit</input>
            </form>

          </LoginStyle>
        </Modal.Content>
        <Modal.Actions>
          <Button color='green' onClick={() => {
            this.logIn()
          }}>
            Log in
          </Button>
        </Modal.Actions>

      </Modal>

    )
  }
}

const LoginStyle = s.div `
    .field {
      display: flex !important;
      align-items: center;
      margin-bottom: .25em;
    }
    .login-input-label {
      margin-right: 1em;
      width: 60px;
    }
    .login-input {
      width: 300px;
    }
`

export default Login

现在，当用户点击登录按钮，safari和chrome提供保存密码时 - 但Firefox没有。我正在使用这三种浏览器的最新版本。

我尝试根据官方文档调整浏览器设置，在安全模式下运行并关闭硬件加速。最好的结果是在安全模式下保存用户名，但密码被忽略。

我还尝试添加onSubmit={e => e.preventDefault()} autoComplete="on"和隐藏的<input type="submit" value="Submit" className='login-submit' />，但最终结果是相同的。

如果有任何帮助，我的应用程序托管在https服务器上，而我在http中进行开发。 Chrome和Safari不会保存托管应用的密码，但会保存localhost。

Answer 1

问题是表单的onSubmit事件从未实际触发，因此浏览器无法识别表单。这是我提出的最终版本，但也可以通过使用外部按钮引用提交事件来实现：

登录功能：

logIn = (e) => {

    e.preventDefault()
    const {username, password} = this.state
    if (username === 'blah' && password === 'blah') {
      this.props.uiStore.isLoggedIn = true
    } else {
      this.setState({incorrectCredentials: true})
    }

  }

表格：

<form ref='loginForm' autoComplete="on" onSubmit={this.logIn}>
              <div className='login-input-field'>
              <label className='login-input-label'>Username:</label>
              <input className='login-input' placeholder='Username' name='username' type='text' onChange={this.onInputChange}/>
              </div>
              <div className='login-input-field'>
              <label className='login-input-label'>Password:</label>
              <input className='login-input' name='password' type='password' onChange={this.onInputChange}/>
            </div>
              <div className='login-submit-container'>
                <input type="submit" value="Log in" className='login-submit' />
              </div>
</form>

Firefox没有打开在反应表单上保存密码的提示

1 个答案: