如何使用可變在反應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

回答

相關問題