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