當瀏覽器或密碼管理器預先填寫內容時，從反應輸入表單中獲取內容

Question

我有一個React應用程序（帶有React Segment UI），到目前為止運行良好。 我有一個登錄表單，與任何登錄表單一樣，我允許它由密碼管理器或瀏覽器自動填寫。 我想做的是獲取預先填寫的表格中的值，主要是檢查它們是否已經填寫。

我怎樣才能做到這一點？

當前，這是我的組件的外觀：

export default class SignIn extends React.PureComponent {
  handleSubmit (evt) {
    // handle submit
  }

  isSignInDisabled () {
    // Would like to check here is the email and password
    // have been prefilled since with this method it won't work
    // in this case.
    return (
      !this.props.email.length ||
      !this.props.password.length
    )
  }

  render () {
    const { email, password } = this.props

    return (
        <Form onSubmit={evt => {
            this.handleSubmit(evt)
        }}>
          <Form.Field>
            <Form.Input
              type='email'
              label='Email'
              value={email}
              onChange={evt => setEmail(evt.target.value)}
            />
          </Form.Field>
            <Form.Field>
              <Form.Input
                type='password'
                label='Password'
                value={password}
                onChange={evt => setPassword(evt.target.value)}
              />
            </Form.Field>,
            <Form.Field>
              <Button type='submit' disabled={this.isSignInDisabled()}>Sign In</Button>
            </Form.Field>
          </Form>
    )
  }
}

Answer 1

要從輸入字段中大致獲取值，可以使用ref機制。

您應該小心 ： ref與真實的DOM交互，而不是虛擬的React DOM。

在官方文檔中了解有關ref更多信息。

 class Form extends React.Component { handleSubmit = (e) => { e.preventDefault(); console.log('Values are', this.firstName.value, this.lastName.value); } render() { return ( <form className="custom-form" onSubmit={this.handleSubmit}> <input type="text" name="first_name" value="John" ref={(input) => { this.firstName = input; }} /> <input type="text" name="last_name" value="Doe" ref={(input) => { this.lastName = input; }} /> <button type="submit">Submit</button> </form> ); } }; const App = () => ( <div> <Form /> </div> ); ReactDOM.render(<App />, document.getElementById('react')); 

 .custom-form { display: block; padding: 10px; } .custom-form > input { display: block; margin-top: 10px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 3px; } .custom-form > button { display: block; margin-top: 10px; padding: 5px 10px; background: #fff; border-radius: 3px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div>