如何使用可变在反应JS

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”应该拿出表示味精。如何使用可变在反应JS

我无法访问函数xhrPostCall中在响应js的render（）中声明的msg变量。

请让我知道如何访问那个变量？

来源

2017-01-27 developer_beginning

你需要添加味精变量在组件属性在声明中'然后在你的组件中，你可以通过'this.props.msg'在你的渲染函数中访问它 –

你能解释一下吗？ –

AddDetailsModal表单是提交的表单，我打开AddMsgModal并将此{msg}显示到此模式中。 –

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

二 - 如果你想自己用Promise创建异步操作来创建它：

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

然后在组件：

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

来源

2017-01-27 10:07:42

如何使用可变在反应JS

回答

相关问题