Question

我正在尝试在我的应用程序中实现hackerrank api。

但Atlassian React Components的行为与普通输入文本字段不同。

提交表单时没有转发价值，并在控制台中发出警告

警告：styled.input正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的使用寿命期间使用受控或不受控制的输入元件。

import React, { Component } from 'react';
import { login, resetPassword } from '../helpers/auth';
import TextField from '@atlaskit/field-text';

function setErrorMsg(error) {
  return {
    loginMessage: error
  }
}

export default class Login extends Component {
  state = { loginMessage: null }
  handleSubmit = (e) => {
   e.preventDefault()
   login(this.email.value, this.pw.value)
     .catch((error) => {
         //catch errors
      })
 }

  render () {
    return (
      <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>Email</label>
            //THIS TEXTFIELD IS MAKING ISSUE

            <TextField autoFocus ref={(email) => this.email = email} placeholder="Email" label="" />
         </div>
         <div className="form-group">
            <label>Password</label>
            <input type="password" className="form-control" placeholder="Password" ref={(pw) => this.pw = pw} />
        </div>

         <button type="submit" className="btn btn-primary">Login</button>
     </form>
    )
  }
}

Answer 1

我刚刚遇到了这个问题。要解决此问题，您只需将道具value=""添加到您的<TextField>

Atlassian React组件 - TextField不被接受

1 个答案: