Welcome everyone

React组件的state属性

前端 汪明鑫 341浏览 0评论

组件被称为”状态机”, 通过更新组件的状态值来更新对应的页面显示(重新渲染)

如何初始化状态:

constructor (props) {
        super(props)
        this.state = {
          K1: V1,
          K2 : V2
        }
      }

读取某个状态值:

this.state.K1

更新状态—->组件界面更新:

this.setState({
        K1: V1,
        K2: V2
      })

来一个Demo感受一下:

先写个静态的

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>state</title>
</head>
<body>

<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">

  class LOL extends React.Component{
      render(){
          return(
              <div>
                  UZI  Penta Kill  !!!
              </div>
          )
      }
  }
  ReactDOM.render(<LOL/>,document.getElementById('demo'));

</script>
</body>
</html>

 

现在想要点击文字,文字根据我们指定的规则变化
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>state</title>
</head>
<body>

<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">

  //现在想要点击文字,文字根据我们指定的规则变化
  class LOL extends React.Component{
      constructor(props){
          super(props);

          //初始化state
          this.state={
              isWho : true
          };

          this.handleClick = this.handleClick.bind(this);
      }

      handleClick(){
          let isWho = !this.state.isWho;  // 每次点击true--->false ,false--->true
          //更新state
          this.setState({
              isWho : isWho
          });
      }

      render(){
          let {isWho} =this.state;     //这种用法称解构赋值(解析对象结构)   等价于  let isWho = this.state.isWho
          let msg = isWho ? 'UZI' : 'faker';
          return(
              <div onClick={this.handleClick}>
                  {msg} Penta Kill  !!!
              </div>
          )
      }
  }

  ReactDOM.render(<LOL/>,document.getElementById('demo'));

</script>
</body>
</html>

 

点击浏览器文字前:

点击浏览器后:


我们前后学习了React组件的三大属性:

props,refs,state

来个Demo结合三大属性练习一下

首先看下实现的效果

我们要实现这样的功能:
在输入框输入数据,点击按钮Add
列表数据更新 Add #n 中 n随列表的数据个数变化而变化

 

要求:
1,输入后、添加数据后,输入框自动清空
2,每次添加的数据追加到列表的尾部
3,输入的数据为空或者为空格,不给予添加,且提示输入数据为空

 

根据上图分析我们需要定义三个组件App,AddToList,List
App里嵌套了两个组件

 

上代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>state练习-动态添加</title>
</head>
<body>

  <div id="demo"></div>

  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">

  class App extends React.Component{
      constructor(props){
          super(props);

          //初始化state   要给List组件去显示
          this.state={
              list:['UZI','faker','7777777']
          };

          this.add=this.add.bind(this);

      }

      //通过函数调用拿到内层组件传来的数据
      add(newPalyer){
          console.log(newPalyer);

          let list = this.state.list;
          list.push(newPalyer);   //把新输入的数据加入数组尾部    push方法是直接更改原数组,返回更改后的长度

          console.log(list);
          //更新state
          this.setState({list})
      }

      //App组件内部嵌套2个组件
      render(){
          let {list} = this.state;   //把这个数据给List组件

          //把add函数作为数据通过 AddToList组件标签属性传给AddToList
          //length是数组的长度
          return(
              <div>
                  <h1>LOL战榜</h1>
                  <AddToList add={this.add}  length={list.length}/>
                  <List mydata={list}/>
              </div>
          )
      }
  }

  class AddToList extends React.Component{
      constructor(props){
          super(props);

          //强制绑定this
          this.addPlayer=this.addPlayer.bind(this);
      }

      //给button绑定的点击事件
      addPlayer(){
          let value = this.refs.playerName.value;

          //判断输入的内容是否为空格
          if(!value.trim()){
              alert("输入不能为空!");
              return
          }

          //调用函数 (利用函数从组件内部向组件外部传递数据)
          this.props.add(value);

          //添加后清空输入框里的数据
          this.refs.playerName.value = '';
      }

      render(){
          let {length} =this.props;
          return(
              <div>
                  <input  type="text" ref="playerName"/>
                  <button onClick={this.addPlayer}>Add #{length}</button>
              </div>
          )
      }
  }

  class List extends React.Component{
      render(){
          //通过组件标签属性传的值需要用props取
          let {mydata} = this.props;
          return(
              <ul>
                  {
                      //html里写js要加大括号   index是个唯一值,我们刚好利用它,而虚拟DOM需要给li标签附一个key
                      mydata.map(function (item, index) {
                          return <li key={index}>{item}</li>
                      })
                  }
              </ul>
          )
      }
  }

  ReactDOM.render(<App />,document.getElementById('demo'));

  </script>
</body>
</html>

 


 

最后我们总结下组件三大属性的应用场景:

1,props:组件外部的数据传入组件内部,通过给组件标签指定属性传递数据,在组件内部就可以根据props取到数据

2,refs :组件内部传递数据,比如组件内部的一个同级的标签需要另一个标签的数据,可以给另一个标签指定ref = “xxx”,则在本标签里可以使用this.refs.xxx来获取数据

3,state:状态,通过在构造函数内初始化状态,更新状态后,会重新渲染界面

 

如果还不是特别理解,可以把代码copy下来,自己跑下,在浏览器装一个react的工具,调试着看下

转载请注明:汪明鑫的个人博客 » React组件的state属性

喜欢 (0)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz