我目前正在尝试使用角度功能,但是我无法在React应用中使用ng-click。
我正在尝试将以下函数转换为React函数,我知道axios
,不确定如何在react中处理刀片变量。
我需要将角度代码片段转换为反作用函数。
Angular(main.js)
$scope.myfollow = function(user) {
$http.post('/user/follow/'+ user.id).then(function(result) {
console.log("user id is:"+ user.id);
});
};
反应文件
render(){
return(
<div className="followdoe">
<button onClick={ this.btnClick.bind(this) } className={this.state.className}>
<p>{ this.state.btnText }</p>
</button>
</div>
)
}
Route.php
Route::post('user/follow/{id}', 'UserController@my_follow');
Profile.blade.php
<div style="margin:30px 0px;">
<button class="follow-button" ng-click="myfollow({{$user}});">+ Follow</button>
</div>
UserController.php
public function my_follow(Request $request, $id)
{
$user = auth()->user();
if($user->id != $id && $otherUser = User::find($id)){
$user->toggleFollow($otherUser);
}
}
public function getProfile($user)
{
$user = User::with(['posts.likes' => function($query) {
$query->whereNull('deleted_at');
}, 'follow','follow.follower'])
->where('name','=', $user)->first();
if(!$user){
return redirect('404');
}
return view ('profile')->with('user', $user);
}
答案 0 :(得分:1)
您可以在组件上创建一个函数并使用fetch
API。
示例
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
className: "test",
btnText: "Text",
user: { id: 123 }
};
this.myfollow = this.myfollow.bind(this);
this.btnClick = this.btnClick.bind(this);
}
myfollow(user) {
fetch(`/user/follow/${user.id}`, { method: "POST" })
.then(response => response.json())
.then(response => {
console.log(response);
});
};
btnClick() {
this.myfollow(this.state.user);
};
render() {
return (
<div className="followdoe">
<button onClick={this.btnClick} className={this.state.className}>
<p>{this.state.btnText}</p>
</button>
</div>
);
}
}