React组件的state属性 – 汪明鑫的个人博客

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

如何初始化状态：

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>