react入门----(this.state/表单/Ajax)

1.this.state

　　组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

 1 var TestStateComponent = React.createClass({
 2             getInitialState: function () {
 3                 return {
 4                     liked: false
 5                 }
 6             },
 7             handleClick: function (event) {
 8                 this.setState({
 9                     liked: !this.state.liked
10                 })
11             },
12             render: function () {
13                 var text = this.state.liked ? "like" : "haven't liked"
14                 return (
15                     <p onClick={this.handleClick}>
16                         You {text} this Click to toggle
17                     </p>
18                 )
19             }
20         })
21         ReactDOM.render(<TestStateComponent/>,document.getElementById('container'))

　　上面代码是一个 TestStateComponent 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

　　由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

2.表单

 1 <!-- 用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取 -->
 2         var Input = React.createClass({
 3             getInitialState: function () {
 4                 return {
 5                     inputVal: ''
 6                 }
 7             },
 8             handleChange: function (event) {
 9                 console.log(event.target.value)
10                 this.setState({
11                     inputVal: event.target.value
12                 })
13             },
14             render: function () {
15                 var value = this.state.inputVal
16                 return (
17                     <div>
18                         <input type="text" vaule={value} onChange={this.handleChange}/>
19                         <p>{value}</p>
20                     </div>
21                 )
22             }
23         })
24         <!-- 上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况， -->
25         ReactDOM.render(<Input/>,document.getElementById('container'))

3.Ajax

 1 var UserList = React.createClass({
 2             getInitialState: function () {
 3                 return {
 4                     userName: '',
 5                     lastGisUrl
 6                 }
 7             },
 8             componentDidMunt: function () {
 9                 $.get(this.props.source, function (res) {
10                     var lastDist = res[0]
11                     this.setState({  
12                         username: lastGist.owner.login,  
13                         lastGistUrl: lastGist.html_url  
14                       });  
15                     }.bind(this))
16                 })
17             },
18             <!-- 当异步加载数据的时候， 使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前 -->
19             componentWillUnmount: function() {  
20                 this.serverRequest.abort()
21             },
22             render: function() {
23                 return (
24                   <div>
25                     {this.state.username}'s last gist is
26                     <a href={this.state.lastGistUrl}>here</a>.
27                   </div>
28                 )
29             }
30         })
31         <!-- 在组件从 DOM 中移除的时候立刻被调用。
32         在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素
33         所以我们可以用这个方法替代 isMounted() 来确保该组件是否还是mounted -->
34         ReactDOM.render(
35           <UserList source="https://api.github.com/users/octocat/gists" />,
36           document.getElementById('container')
37         )
38         <!-- 上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。
39         如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。 -->

react入门----(this.state/表单/Ajax)

相关推荐