从反应调用引导模式

查看您的代码，您需要将字段（用户名和密码）的逻辑与 handleLoginClick 函数分开。

您需要添加一些函数（handleUsernameChange 和 handlePasswordChange），它们可以将字段中的内容与组件的状态同步，如下所示：

import React, { Component } from 'react';

class Login extends Component {
   constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
        };

                this.handleloginClick = this.handleloginClick.bind(this);
                this.handleUsernameChange = this.handleUsernameChange.bind(this);
                this.handlePasswordChange = this.handlePasswordChange.bind(this);

    } //end constructor

    handleloginClick(event) {
      const username = this.state.username
      const password = this.state.password

      const datos = {
            username: username,
            password: password
      }

      fetch('http://theapi/api/auth', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
             body: JSON.stringify(datos)
      }) /*end fetch */

        .then(function(data) {
          console.log('data =', response);
          return data.json();
      })
        }

        handleUsernameChange(event) {
            this.setState({username: event.target.value});
        }

        handlePasswordChange(event) {
            this.setState({password: event.target.value});
        }

    render() {
      return (
         <div className="modal fade" id="writeData" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">

                <h4 className="modal-title" id="exampleModalLabel">Identificaci&oacute;n</h4>
                </div>

                  <div className="modal-body">
                    <div className="form-group">
                      <label className="control-label label-default">Usuario:</label>
                      <input type="text" className="form-control input-sm" id="usr" data-toggle="tooltip" data-placement="top" onChange={this.handleUsernameChange} value={this.state.username}   required />
                      </div>
                       <div className="form-group label-default">
                      <label  className="control-label">Clave:</label>
                      <input type="password" className="form-control input-sm" id="pass" data-toggle="tooltip" data-placement="bottom" onChange={this.handlePasswordChange} value={this.state.password}  required />
                      </div>
                  </div>
                  <div className="modal-footer">
                    <button type="button" className="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" className="btn btn-primary "  onClick={this.handleloginClick}  id="btnEnviar">Aceptar</button>
                  </div>

              </div>
            </div>
          </div>
        );
      }
}

export default Login;

这就是我建议您实现的目标：

当您开始上课时，模式会自动出现

componentDidMount() {
  const modal = document.querySelector('#writeData');
  modal.classList.add('show');
}

记住componentDidMount函数是根据 React 生命周期执行的Component，在 HTML 被添加到页面之后。

当你点击接受时，调用 handleloginClick 函数，将用户名和密码传递给它，调用服务器后，它会返回任何内容。

handleloginClick(event) {
  this.setState({username: document.querySelector('#usr').value});
  this.setState({password: document.querySelector('#pass').value});
  ...fetch
}

这部分代码本身有一些细节，您的代码目前发生的情况是该函数handleloginClick永远不会target.value在事件中包含，因为按钮是触发事件的按钮。这就是为什么您必须有另一种调用方式的原因，我建议的方式不是最好的，但您不会对当前代码进行太多修改。