如何在反应js中使用变量答案

【问题标题】：How to use variable in react js如何在反应js中使用变量
【发布时间】：2017-01-27 09:52:59
【问题描述】：

import React from 'react'
import { Link } from 'react-router'

var result;var response;var jsonString ;var msg;

var xhr = new XMLHttpRequest();
var xhrPost = new XMLHttpRequest();

function xhrGetCall(getUrl){
  xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
          result = xhr.responseText;
          jsonString = JSON.parse(result);
          console.log('API data retrieved:'+jsonString);
          return result;
      }
  }
  xhr.open('GET', getUrl, true);
  xhr.setRequestHeader("Access-Control-Allow-Origin", true);
  xhr.setRequestHeader( 'Content-Type', 'application/json' );
  xhr.send(null);
  xhr.onerror = function(xhr, textStatus, errorThrown) {
    console.log( 'The data failed to load :('+JSON.stringify(xhr));
  };
};

function xhrPostCall(jsonInput, postUrl){

  xhrPost.open("POST",postUrl, true);
  xhrPost.setRequestHeader("Content-type", "application/json");
    xhrPost.onreadystatechange = function() {
      if(xhrPost.readyState == XMLHttpRequest.DONE && xhrPost.status == 200) {
        msg="succesful!";
          console.log('posting succesful'+jsonInput);
      }
            else {
            msg="failed!";
            alert('msg is:'+msg);
            console.log('posting unsuccesful'+msg);
            }
  }
  xhrPost.send(jsonInput);
    return msg;
}

class AddDetailsModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {UserName: ''};
        this.handleChangeUserName = this.handleChangeUserName.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
        this.handleClick=this.handleClick.bind(this);

        xhrGetCall(this.props.getUrl);
        xhr.onload = function() {
         response = JSON.parse(xhr.responseText);
         this.setState({apiReturnValue:jsonToHtmlSelect(response)});
     }.bind(this);
  }
    componentDidMount(){

    }
    handleChangeUserName(event) {
    this.setState({UserName: event.target.value});
  }


  handleSubmit(event) {
        var str = {"UserName": this.state.UserName};
        var json = JSON.stringify(str);
    xhrPostCall(json,this.props.postUrl);
        this.setState({msg:xhrPostCall()});
        console.log("testing: msg:"+msg);

        $('#AddDetailsModal').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
         })


  }

  render() {

    return (
            <div>
            <div id="AddDetailsModal" className="modal fade" role="dialog">
            <div className="modal-dialog">
                <div className="modal-content">
                <div className="modal-header">
                      <button type="button" className="close" data-dismiss="modal">&times;</button>
                      <h4 className="modal-title">Add Details</h4>
                  </div>

            <div className="modal-body">

        <div className="form-group">
          <label className="col-sm-0 control-label" htmlFor="textinput"> Name : &nbsp; </label>
          <input type="text" value={this.state.UserName} onChange={this.handleChangeUserName}  placeholder="Name" className="form-control"></input>
        </div>

            <div className="modal-footer">
                  <button type="submit" className="btn btn-default" data-dismiss="modal">Cancel</button>
                  <button type="submit" value="submit" onClick={this.handleSubmit} className="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#AddMsgModal">Submit</button>
            </div>
            </div>
      </div>
    </div>

    <div id="AddMsgModal" className="modal fade" role="dialog">
    <div className="modal-dialog">
        <div className="modal-content">

            <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">&times;</button>
                        <h4 className="modal-title">Message Heading</h4>
                </div>

                <div className="alert alert-success">
                {msg}
                </div>

    <div className="modal-footer">
                <button type="submit" className="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
</div>
</div>
</div>

 </div>


    );
  }
}


export default AddDetailsModal;

我已经制作了一个反应组件“AddDetailsModal”，它是通过 handleSubmit() 函数成功或不成功提交表单时的引导表单模式，另一个模式“AddMsgModal”应该会显示消息。

我无法访问在 react js 的 render() 中函数 xhrPostCall 中声明的 msg 变量。

请告诉我如何在那里访问该变量？

【问题讨论】：

你需要在声明<AddDetailsModal msg={msg}>时在组件的属性中添加msg变量，然后在你的组件中你可以通过this.props.msg在你的渲染函数中访问它
你能解释一下吗？
AddDetailsModal 表单是我打开 AddMsgModal 并将此 {msg} 显示到此模式中的提交表单。

标签： javascript reactjs

【解决方案1】：

首先 - 使用像fetch 这样的实验室来创建一些ajax 请求。

第二个 - 如果您想自己创建它，请使用Promise 创建异步操作：

return new Promise((resolve) => {
    //perform some async actions
    resolve(result)
})

然后在组件中：

fetchData().then((result) => this.setState({msg: result})

【讨论】：