Wie Variable verwenden in 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;

reagiere ich eine reagieren Komponente „AddDetailsModal“, die modal durch handleSubmit auf erfolgreiche oder erfolglose Übertragung des Formulars ist Bootstrap-Form gemacht haben() gibt die andere modal „AddMsgModal“ kommen sollte zeigen die NachrichtWie Variable verwenden in js

Ich kann nicht auf die msg-Variable zugreifen, die in der Funktion xhrPostCall in render() von react js deklariert ist.

Bitte lassen Sie mich wissen, wie man auf diese Variable dort zugreifen?

Quelle

2017-01-27 developer_beginning

Sie die msg-Variable in der Komponente hinzufügen müssen Eigenschaften während der Deklaration '' dann in Ihrer Komponente können Sie es in Ihrer Renderfunktion über 'this.props.msg' zugreifen –

können Sie ein bisschen mehr erklären? –

AddDetailsModal-Formular ist ein Formular, auf dessen Einreichung ich AddMsgModal öffne und dieses {msg} in diesem Modal anzeigen. –

Zuerst - verwenden Sie einige labriry wie fetch, um einige Ajax-Anfragen zu erstellen.

Second - wenn Sie wollen, es erstellen, indem Sie sich Promise verwenden, um asynchrone Operationen zu erstellen:

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

Dann in Komponenten:

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

Quelle

2017-01-27 10:07:42

Wie Variable verwenden in js

Antwort

Verwandte Themen