react留言功能准备一

最新推荐文章于 2024-05-02 10:11:46 发布

前端岚枫

最新推荐文章于 2024-05-02 10:11:46 发布

阅读量631

点赞数

分类专栏： react 文章标签：留言功能 state props onChange

本文链接：https://blog.csdn.net/lfcss/article/details/79910445

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏


 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>