将 angularJS 函数转换为反应函数

Question

我目前正在尝试使用角度功能，但我无法在反应应用程序中使用 ng-click。

我正在尝试将以下函数转换为反应函数，我知道 axios，不确定如何在反应中处理刀片变量。

我需要将角度 sn-p 转换为反应函数。

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);
    }

Answer 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>
    );
  }
}