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

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

阅读量：4591 次

发布时间：2019-06-09

本文共 3114 字，大约阅读时间需要 10 分钟。

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.liked10                 })11             },12             render: function () {13                 var text = this.state.liked ? "like" : "haven't liked"14                 return (15                     16                         You {text} this Click to toggle17                     
18                 )19             }20         })21         ReactDOM.render(
     ,document.getElementById('container'))

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

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

2.表单

1 
      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.value12                 })13             },14             render: function () {15                 var value = this.state.inputVal16                 return (17                     
     
      18                         
      19                         
      {value}
20                     
     
21                 )22             }23         })24         
     25         ReactDOM.render(,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             
     19             componentWillUnmount: function() {  20                 this.serverRequest.abort()21             },22             render: function() {23                 return (24                   
     
      25                     {this.state.username}'s last gist is26                     
      here.27                   
     
28                 )29             }30         })31         
     34         ReactDOM.render(35           
     ,36           document.getElementById('container')37         )38

转载于:https://www.cnblogs.com/songdongdong/p/7306689.html

你可能感兴趣的文章