mercredi 26 septembre 2018

Calling a member function from an axios function in another member function in sameclass in react.js

I am trying to implement a axios functionality.My problem is i can't call another member function from axios function definition in laravel-react combination.js.Also i found that this.setState not working inside axios function definition.I spent moretime time to find a solution.One post i found is solution relates to jsfiddle method in stackoverflow.But it is not working in my project. This is my jsx file.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { LocalForm, Control } from 'react-redux-form';
import SweetAlert from 'sweetalert-react';
import 'sweetalert/dist/sweetalert.css';
import axios from 'axios';
export default class MyApp extends React.Component {
    constructor(props)
    {
       super(props);
       this.state={ show:false,message:''}   
    }

  handleChange(values) {  }
  handleUpdate(form) {  }
  handleSubmit(values) { 

    axios.post('/log-in/',{
        username:'username',
        password:'password'
    }).then(function(response)
    {

        this.display(response.data);
    }).catch(function(error)
    {
        this.display(error);    
    });
     display(data)
   {
      this.setState({ message:data});
      this.setState({ show:true})
   }    
   }
  render() {
    return (
        <div id="log-in">
        <h3 className="hh"><b>Log In</b></h3>
      <LocalForm
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
      >
        <div className="form-control-area">
        <label className="form-label">USERNAME</label>
        <Control.text model=".username" className="form-control" />
        </div>
        <div className="form-control-area">
        <label className="form-label">PASSWORD</label>
        <Control type="password"  model=".password" className="form-control"/>
        </div>
        <div className="form-control-area">
        <table><tr>
        <td>
        <Control type="submit"  model=".Submit" className="form-submit"/>
        </td>
        <td>
        <Control type="reset"  value="Cancel" model=".Cancel" className="form-reset"/>
        </td></tr></table>
        </div>
      </LocalForm><SweetAlert 
        show={this.state.show}
        title="Sorry"
        text={this.state.message}
        onConfirm={() => this.setState({ show: false })}
      /></div>
    );
  }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}
if(document.getElementById('start'))
{
  ReactDOM.render(<MyApp />,document.getElementById('start'));
}

it is my blade file

<!DOCTYPE html>
<html lang="">
<head>
    <title>Demo|Log In</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    </head>
    <body>
        <div id="start"></div>
        <div id="alert"></div>
        <script src=""></script>
    </body>
</html>

Please help me to fix this bug



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire