Front-End

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

Posted on by 九九 / 2510 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》即将上映'});
})

源码地址

,
九九
过去的我们，现在的自己，往事，终会随风而逝。