Javascript 如何在react js中使用变量 从“React”导入React 从“反应路由器”导入{Link} var结果；var反应；var-jsonString；var-msg； var xhr=new XMLHttpRequest（）； var xhrPost=newXMLHttpRequest（）； 函数xhrGetCall（getUrl）{ xhr.onreadystatechange=函数（）{ if（xhr.readyState==XMLHttpRequest.DONE）{ 结果=xhr.responseText； jsonString=JSON.parse（结果）； log（'检索到的API数据：'+jsonString）； 返回结果； } } open（'GET'，getUrl，true）； setRequestHeader（“访问控制允许原点”，true）； setRequestHeader（'Content-Type'，'application/json'）； xhr.send（空）； xhr.onerror=函数（xhr、textStatus、errorshown）{ log（'数据加载失败：（'+JSON.stringify（xhr））； }; }; 函数xhrPostCall（jsonInput、postrl）{ xhrPost.open（“POST”，postrl，true）； setRequestHeader（“内容类型”、“应用程序/json”）； xhrPost.onreadystatechange=函数（）{ if（xhrPost.readyState==XMLHttpRequest.DONE&&xhrPost.status==200）{ msg=“成功！”； console.log（'posting successful'+jsonInput）； } 否则{ msg=“失败！”； 警报（'消息为：'+消息）； console.log（'posting unsuccessful'+消息）； } } xhrPost.send（jsonInput）； 返回味精； } 类AddDetailsModel扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={用户名：'}； this.handleChangeUserName=this.handleChangeUserName.bind（this）； this.handleSubmit=this.handleSubmit.bind（this）； this.handleClick=this.handleClick.bind（this）； xhrGetCall（this.props.getUrl）； xhr.onload=函数（）{ response=JSON.parse（xhr.responseText）； this.setState（{apireutvalue:jsonToHtmlSelect（response）}）； }.约束（本）； } componentDidMount（）{ } handleChangeUserName（事件）{ this.setState（{UserName:event.target.value}）； } handleSubmit（事件）{ var str={“UserName”：this.state.UserName}； var json=json.stringify（str）； xhrPostCall（json，this.props.postrl）； this.setState（{msg:xhrPostCall（）}）； 日志（“测试：msg:+msg”）； $（'#AddDetailsModal'）.on（'hidden.bs.modal'，function（e）{ $（本） .find（“输入，文本区域”） .val（“”） (完) .find（“输入[type=checkbox]，输入[type=radio]”） .prop（“选中的”，“”） .end（）； }) } render（）{ 返回( &时代； 添加详细信息 姓名： 取消 提交 &时代； 消息标题 {msg} 取消 ); } } 导出默认AddDetailsModel；

我已经制作了一个react组件“AddDetailsModal”，它是引导表单模式，在handleSubmit（）函数成功或失败提交表单时，另一个模式“AddMsgModal”应该显示消息

我无法访问react js的render（）中函数xhrPostCall中声明的msg变量

---

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

首先使用类似labriry的工具创建一些ajax请求

Second-如果您想自己创建它，请使用

Promise

创建异步操作：

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;

然后在组件中：

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

---

在声明过程中，您需要在组件的属性中添加msg变量

，然后在组件中，您可以通过

this.props.msg

在渲染函数中访问它。您能解释一下吗？AddDetailsModal表单是一个表单，在提交时，我打开AddMsgModal并将此{msg}显示到该模式中。

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