0

我正在尝试在我的应用程序中实现Atlassian React 组件。

但是TextField的行为不像正常的输入文本字段。

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

警告：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>
    )
  }
}
4

1 回答 1

1

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

于 2018-07-13T06:46:42.243 回答