javascript - TypeError：无法获取输入文本

Question

我在 React 中使用下面的 JS 代码来获取用户名和密码。

当我将用户名的输入类型用作文本时，我得到“TypeError：无法获取”，但如果我将类型切换为电子邮件，则获取工作正常。

这是为什么？我不希望输入类型为电子邮件，因为它会在提交表单时提示我进行其他检查，例如 @ 符号。

我的 JS：

login() {
  const userObject = {
    username: document.getElementById('inputUsername').value || null,
    password: document.getElementById('inputPassword').value || null
  };
  this.connect('someurl.com', userObject);
}

async connect(url, userObject) {
  try {
    let response = await fetch((url), {
      method: "PUT",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userObject)
    });
  } catch (e) {
    console.error(e);
  }
}

我的 HTML 输入：

<input type="text" id="inputUsername" />

标签： javascripthtmlreactjs

Answer 1

当您使用 React 时，您必须始终将输入的值保存在 State 中，并在 ajax 调用中发送 State 值

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userName: null,
      password: null
    }
    this.UserNameChange = this.UserNameChange.bind(this);
    this.PasswordChange = this.PasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  UserNameChange(event) {
    this.setState({
      userName: event.target.value
    });
  }
  PasswordChange(event) {
    this.setState({
      password: event.target.value
    });
  }
  handleSubmit(event) {
    alert('UserName: ' + this.state.userName + ' and Password: ' + this.state.password);
    event.preventDefault();
  }
  render() {
    return ( 
    <div>
      <form onSubmit = {this.handleSubmit}>
      <input type = 'text' onChange = {this.UserNameChange} placeholder = 'UserName' / >
      <br/>
      <input type = 'text' onChange = {this.PasswordChange} placeholder = 'Password' / >
      <br/>
      <input type = "submit" value = "Submit"/>
      </form> 
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render( <App/> , rootElement);

<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='root' />