react入门----(this.state/表单/Ajax)
2024-08-26 21:15:55
1.this.state
组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
var TestStateComponent = React.createClass({
getInitialState: function () {
return {
liked: false
}
},
handleClick: function (event) {
this.setState({
liked: !this.state.liked
})
},
render: function () {
var text = this.state.liked ? "like" : "haven't liked"
return (
<p onClick={this.handleClick}>
You {text} this Click to toggle
</p>
)
}
})
ReactDOM.render(<TestStateComponent/>,document.getElementById('container'))
上面代码是一个 TestStateComponent 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
2.表单
<!-- 用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取 -->
var Input = React.createClass({
getInitialState: function () {
return {
inputVal: ''
}
},
handleChange: function (event) {
console.log(event.target.value)
this.setState({
inputVal: event.target.value
})
},
render: function () {
var value = this.state.inputVal
return (
<div>
<input type="text" vaule={value} onChange={this.handleChange}/>
<p>{value}</p>
</div>
)
}
})
<!-- 上面代码中,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况, -->
ReactDOM.render(<Input/>,document.getElementById('container'))
3.Ajax
var UserList = React.createClass({
getInitialState: function () {
return {
userName: '',
lastGisUrl
}
},
componentDidMunt: function () {
$.get(this.props.source, function (res) {
var lastDist = res[0]
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this))
})
},
<!-- 当异步加载数据的时候, 使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前 -->
componentWillUnmount: function() {
this.serverRequest.abort()
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
)
}
})
<!-- 在组件从 DOM 中移除的时候立刻被调用。
在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素
所以我们可以用这个方法替代 isMounted() 来确保该组件是否还是mounted -->
ReactDOM.render(
<UserList source="https://api.github.com/users/octocat/gists" />,
document.getElementById('container')
)
<!-- 上面代码从Github的API抓取数据,然后将Promise对象作为属性,传给RepoList组件。
如果Promise对象正在抓取数据(pending状态),组件显示"正在加载";如果Promise对象报错(rejected状态),组件显示报错信息;如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据。 -->
最新文章
- 使用VBScript实现设置系统环境变量的小程序
- Acionbar logo
- SQL IN ANY ,(all any) 区别
- JS事件模型小结
- IOS第七天(5:UiTableView 汽车品牌,复杂模型分组展示,A-Z索要列表) (2015-08-05 14:03)
- .NET Framework 4.6的新东西
- DevExpress GridControl 部分用法
- mysql中 的 ENGINE = innodb; 是什么意思?
- centos mysql 编译安装
- EF中使用Contains方法
- HTML&;CSS基础学习笔记1.25-input标签隐藏元素
- linux基础内容学习一:linux下的分区及安装
- 几种常用hash算法及原理
- Docker实践之01-入门介绍
- C 捕获 lua 异常错误
- Centos6.5安装中文支持和中文输入法
- Python操作redis系列之 列表(list) (五)
- Dom4j与sax 简单对比
- public,protected,private
- PHP中的 抽象类(abstract class)和 接口(interface)