react留言功能准备一


 1. props组件初始要渲染的数据不可改变
 2. 组件状态发生改变时候,调用render方法,重新渲染


<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="./src/react.js"></script>
        <script src="./src/react-dom.js"></script>
        <script src="./src/browser.min.js"></script>
    </head>

    <body>
        <div id="demo"></div>
        <script type="text/babel">

            var FirstComponent = React.createClass({
                getInitialState:function () {
                    return {
                        mes:this.props.value
                    }
                },
                    render:function (){
                        return (
                            <div>
                                <h1>{this.props.title}</h1>

                                {/*value不能用this.props获取value值,因为其不可改变,应用state获取值;onchange是为了初始化值触发*/}
                                <input type="text" value={this.state.mes} onChange={this.changeHandle}/>

                                <input type="button" value={this.props.sendName} />

                                {/*数据绑定输出*/}
                                <p>{this.state.mes}</p>
                            </div>
                        )   
                    },
                changeHandle:function (ev) {
                        console.log(ev.target.value)
                    this.setState({mes:ev.target.value})

                }
                });



            var obj = {
                title:'欢迎来到react世界',
                sendName:'提交',
                value:"请输入留言"
            }

            ReactDOM.render(
                <FirstComponent {...obj} />,
                document.getElementById("demo"),
                function(){
                    console.log("页面渲染完成");
                }
            );

        </script>
    </body>
</html>
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值