美文网首页
this.state 用户与组件互动

this.state 用户与组件互动

作者: 兰夏天 | 来源:发表于2018-01-30 09:54 被阅读0次

    <div id="example"></div>
    <script type="text/babel">
    var LikeButton =React.createClass({
    getInitialState:function(){
    return{liked:false} //这个方法用于初始化状态,可以通过
    // this.state属性读取。 即读取this.state.like 是 false
    },
    handleClick:function(event){
    this.setState({
    liked:!this.state.liked //第一次点击后 取初始化 false的反值为true
    }); // 通过this.setState()方法修改 like状态值
    // 每次修改以后,自动调用this。render方法,再次渲染组件
    },
    render:function(){
    var text =this.state.liked?'like':'hanve't liked';
    return (
    <p onClick={this.handleClick}>
    You {text} hhhh
    </p>
    )
    }
    });
    ReactDOM.render(
    <LikeButton/>,
    document.getElementById('example')
    )
    </script>

    相关文章

      网友评论

          本文标题:this.state 用户与组件互动

          本文链接:https://www.haomeiwen.com/subject/ngpqzxtx.html