新闻点赞案列

新闻点赞案列

1、后端准备数据
返回如下json数据：

{"id":101,"created":"2016-10-29","title":"探索之路","desc":"是手机团队的探索之路","clickNum":99}

2、我们在react里定义个新闻组件

import React from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


// 定义新闻组件
class News extends React.Component{
    // 初始化
    constructor(props){
        super(props);

        this.state = {
            news: {}, // 新闻数据
        };
    }

    // 组件渲染之前
    componentWillMount(){
        // ajax请求服务器获取新闻数据
        axios.get(
            "http://localhost/news.php",
            {params:{newsid:this.props.newsid}}
        )
        .then((res)=>{
            console.log(res.data);
            this.setState({
                news: res.data // 保存从服务器请求回来的数据
            })
        })
    }

    // 渲染到页面
    render(){
        return <div>
            <h2>文章标题：{this.state.news.title}</h2>
            <p>
                <span>创建时间：{this.state.news.created}</span> |
                点赞数：<a href="javascript:;">{this.state.news.clickNum}</a>
            </p>
            <p>{this.state.news.desc}</p>
        </div>
    }
}


// 最后渲染
ReactDOM.render(
    <News newid="101" />, // 使用组件
    document.getElementById('root')
);

渲染处理的页面是这样的。

接着我们来完成『点赞』功能：

    //自定义函数处理 用户点赞动作
    clickNumHandel(){
        alert("我要点赞");
    }

然后需要处理这个函数：

<p>
                <span>创建时间：{this.state.news.created}</span> |
                点赞数：<a href="javascript:;" onClick={this.clickNumHandel}>{this.state.news.clickNum}</a>
            </p>

接下来 我们就是要完成这个 处理点赞的函数clickNumHandel：

    //自定义函数处理 用户点赞动作
    clickNumHandel(){
        axios.post(
            "http://localhost/test.php",
            {params:{newsid:this.props.newsid}}
        )
            .then((res)=>{
                //console.log(res.data);
                this.setState({
                    clickNum:res.data.clickNum  // 更新 点赞数
                })
            })
    }

上面代码我们把新闻id提交到服务器，返回的数据是 点赞数，如下这样的json数据：

{status: "success", clickNum: 100}

所以我们在setState()中只更新了clickNum。
因此我们还需要在初始化里 定义个一个state专门用来存储 clickNum：

    constructor(props){
        super(props);

        this.state = {
            news: {}, // 新闻数据
            clickNum:0 // 点赞数
        };
    }

这样在render()里我们也可以这样获取clickNum了：

{this.state.clickNum}

但是一点击却报错了，其实这个问题很简单：就是this的作用域问题。
在clickNumHandel()函数里 用this.props.newsid拿不到。

解决这个问题也简单，在调用这个的时候bind(this):

onClick={this.clickNumHandel.bind(this)}

3、最后我们来看这个案列的完整代码：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


// 定义新闻组件
class News extends React.Component{
    // 初始化
    constructor(props){
        super(props);

        this.state = {
            news: {}, // 新闻数据
            clickNum:0 // 点赞数
        };
    }

    // 组件渲染之前
    componentWillMount(){
        // ajax请求服务器获取新闻数据
        axios.get(
            "http://localhost/news.php",
            {params:{newsid:this.props.newsid}}
        )
        .then((res)=>{
            //console.log(res.data);
            this.setState({
                news: res.data, // 保存从服务器请求回来的数据
                clickNum:res.data.clickNum
            })
        })
    }

    // 渲染到页面
    render(){
        return <div>
            <h2>文章标题：{this.state.news.title}</h2>
            <p>
                <span>创建时间：{this.state.news.created}</span> |
                点赞数：<a href="javascript:;" onClick={this.clickNumHandel.bind(this)}>{this.state.clickNum}</a>
            </p>
            <p>{this.state.news.desc}</p>
        </div>
    }

    //自定义函数处理 用户点赞动作
    clickNumHandel(){
        axios.post(
            "http://localhost/test.php",
            {params:{newsid:this.props.newsid}}
        )
            .then((res)=>{
                console.log(res.data);
                this.setState({
                    clickNum:res.data.clickNum  // 更新 点赞数
                })
            })
    }
}


// 最后渲染
ReactDOM.render(
    <News newid="101" />, // 使用组件
    document.getElementById('root')
);