Skip to content
久久日记本
曾经年少爱追梦,一心只想往前飞
  • 首页
  • 博客
    • 博客历史
    • 主题
    • 个人文集
  • 关于
    • 正在读的书
    • 作品归档
    • 2018作品归档
    • 联系我
  • 友情链接
  • 留言板
❄
❅
❆
❄
❅
❆
❄
❅
❆
❄
Front-End

React中简单的数据绑定与事件

Posted on 2016年3月16日 by 九九 / 2471 Views

本文目录

目录

*1.子组件父组件

*2.简单的样式

*3.简单的绑定数据

//*4.循环对象(会在下个笔记中)

*5.添加事件

*6.事件中获取对象

*7.更新对象

1.子组件父组件

在上个章节第一次使用WebPack来写React章节,可以运行基本的Hello World。

这里,初始化同样的目录,尝试嵌套组件,即子组件和父组件。

想到一个需求,一个简单的图片文字列表,单击图片会弹出图片对应的标题和详情。

在 components 文件夹新建 panel.jsx 组件:

'use strict';
var React = require("react");
module.exports=React.createClass({
    render: function () {
        return //todo
    }
});

用父组件 panels 来包含 panel

新建 panels.jsx :

'use strict';

var React = require('react')
//var ReactDOM = require('react-dom')
var Panel = require('./panel')

module.exports = React.createClass({
    displayName: 'panels',
    render: function () {
        return <div>
            <Panel/>
            <Panel/>
        </div>
    }
});

将组件输出的html页面上

同样用上一章节第一次使用WebPack来写React的 index.html.
将组件输入到 id 为 content 的div上。

添加 index.jsx

'use strict';
//var React = require('react')
var ReactDOM = require('react-dom')

//var Panel=require('./panel')
var Panels = require('./panels')


ReactDOM.render(
    <Panels/>//据说这叫复合组件,组件panels引用了组件panel,组件集合么?XD
    ,document.getElementById('content')
    )
npm run start

既可以运行

2.简单的样式

在 1 中,输出的html并没什么复杂的样式,现在写一个图文排版的简单的div样式:

<body>
    <div style="width:350px;height:300px;border:1px solid silver;-moz-box-shadow:2px 2px 13px #333333; -webkit-box-shadow:2px 2px 13px #333333; box-shadow:2px 2px 13px #333333;">
        <div style="width:320px;height:240px;margin:auto auto">
            <img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="320" height="240" />
        </div>
        <div style="width:320px;height:50px;margin:10px auto auto auto;">
            <div style="width:40px;float:left;">
                <img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="38" height="38" />
            </div>

            <div style="width:280px;float:left;">
                <div>《疯狂动物城》,迪斯尼的又一杰作...</div>
                <div>
                    2016-03-15
                </div>
            </div>
        </div>
    </div>
</body>

将html布局放入 panel.jsx 组件中:

'use strict';
var React = require("react");
module.exports=React.createClass({
    render: function () {
        //todo
        return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
            <div style= {{"width":"320px","height":"240px","margin":"auto auto"}}>
                <img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="320" height="240" />
            </div>
            <div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
                <div style={{"width":"40px","float":"left"}}>
                    <img src="http://img.99diary.com/blog/src/201603161422/logo.jpg" width="38" height="38" />
                </div>

                <div style={{"width":"280px","float":"left"}}>
                    <div>让《疯狂动物城》背后的迪士尼告诉...</div>
                    <div>
                        2016-03-15
                    </div>
                </div>
            </div>
        </div>
    }
});

3.简单的绑定数据

React会根据状态(State)进行渲染,组件默认是null,但是可以通过它的getInitialState方法将其初始化为合理的值。

在这个实例中,我们可以对 图片链接,标题,发布时间来设置一个对象:

getInitialState:function () {
    return {
        logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
        title: "让《疯狂动物城》背后的迪士尼告诉...",
        publishdate:"2016-03-15"
    }
}

以上设置了 图片logo,标题,和发布时间,到这里,可以在render中读取this.state,以便向用户展示当前表单中的所有数据。

这里有点向AngularJS1中的$scope AngularJS1实战,

更新一下panel代码

'use strict';
var React = require("react");
module.exports=React.createClass({
    getInitialState:function () {
        return {
            logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
            title: "让《疯狂动物城》背后的迪士尼告诉...",
            publishdate:"2016-03-15"
        }
    },
    render: function () {
        //todo
        return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
            <div style= {{"width":"320px","height":"240px","margin":"auto auto"}}>
                <img src={this.state.logo} width="320" height="240" />
            </div>
            <div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
                <div style={{"width":"40px","float":"left"}}>
                    <img src={this.state.logo} width="38" height="38" />
                </div>

                <div style={{"width":"280px","float":"left"}}>
                    <div>{this.state.title}</div>
                    <div>
                        {this.state.publishdate}
                    </div>
                </div>
            </div>
        </div>
    }
});

看到了一样的效果

4.循环对象
我们让列表(panels)中的 panel 呈现不同的内容。
5.添加事件

给图片添加一个点击事件,点击之后获取图片信息:

onClick={this.showdetail}
showdetail: function (event) {
}

综上更新代码为:

```jsx
'use strict';
var React = require("react");
module.exports=React.createClass({
    getInitialState:function () {
        return {
            logo: "http://img.99diary.com/blog/src/201603161422/logo.jpg",
            title: "让《疯狂动物城》背后的迪士尼告诉...",
            publishdate:"2016-03-15"
        }
    },
    render: function () {
        //todo
        return <div style={{"width":"350px","height":"300px","border":"1px solid silver","MozBoxShadow":"2px 2px 13px #333333","WebkitBoxShadow":"2px 2px 13px #333333","BoxShadow":"2px 2px 13px #333333"}}>
            <div style= {{"width":"320px","height":"240px","margin":"auto auto","cursor":"pointer"}} onClick={this.showdetail}>
                <img src={this.state.logo} width="320" height="240" />
            </div>
            <div style={{"width":"320px","height":"50px","margin":"10px auto auto auto"}}>
                <div style={{"width":"40px","float":"left"}}>
                    <img src={this.state.logo} width="38" height="38" />
                </div>

                <div style={{"width":"280px","float":"left"}}>
                    <div>{this.state.title}</div>
                    <div>
                        {this.state.publishdate}
                    </div>
                </div>
            </div>
        </div>
    },
    showdetail: function (event) {
        //获取点击的对象信息
        //event.targe
        //event.targe.height
        //event.targe.width
        //event.targe.src

        //获取对象绑定的数据对象
        //this
        console.log(this);
    }
});
6.事件中获取对象

断点上一节这里的console.log 可以发现:

event.target 获取 生成图片DOM

this.state 数据对象

7.更新对象

可以通过更改 数据对象 的属性来修改页面显示的信息

showdetail: function (event) {
    this.state.title="《疯狂动物城2》即将上映";
})

然而这种方式似乎并不正确,页面的DOM并没有被重新渲染更新。

其实React有两种更新数据的方法:

setState 把传入的对象合并到已有的state对象
replaceState 会用一个全新的state对象替换原有的state

showdetail: function (event) {
    this.setState({title:'《疯狂动物城2》即将上映'});
})

源码地址

React, Webpack
九九
过去的我们,现在的自己,往事,终会随风而逝。 View all posts by 九九 →

Post navigation

Older post
博雅网的投票工具
Newer post
基于数学统计的验证码识别系列文章

标签云

Android ASP.NET Baby C# C/C++ CSS Div DX11 flask front-end GAE Git Java JJProject JS Life MSSQL MVC OpenSource Oracle Python React React-Native Software Tools Vue Webpack Website Window WP7 乱记 十年旧梦 天气 宝宝成长日记 小说 工作 情感 故障 散文 日记 游戏开发 网新实训笔记 花落梧桐 诗间集 转载

时光机

  • 2023年2月
  • 2022年12月
  • 2022年4月
  • 2022年3月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年5月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年5月
  • 2019年12月
  • 2019年10月
  • 2019年9月
  • 2019年6月
  • 2019年5月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年7月
  • 2017年3月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年7月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年1月
  • 2012年11月
  • 2012年10月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年6月
  • 2010年5月
  • 2010年2月
  • 2010年1月
  • 2009年12月
  • 2009年11月
  • 2009年10月
  • 2009年9月
  • 2009年8月
  • 2009年7月
  • 2009年6月
  • 2009年5月
  • 2009年4月
  • 2009年3月
  • 2009年2月
  • 2009年1月
  • 2008年8月
  • 2008年6月
  • 2008年5月
  • 2008年4月
  • 2008年2月
  • 2007年11月
  • 2007年8月
  • 2007年6月
  • 2007年5月
  • 2007年4月
  • 2007年3月
  • 2007年2月
  • 2007年1月
  • 2006年10月
  • 2006年8月
© 2006 - 2023 久久日记本
Powered by WordPress | Theme: Graphy for 99diary