React笔记_(3)_react语法2

React笔记_(3)_react语法2

state和refs

props就是在render渲染时，向组件内传递的变量，这个传递是单向的，只能继承下来读取。

如何进行双向传递呢？

state （状态机）

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

下面是一个例子。

一个文本框，一个按钮，按钮点击控制文本框的可用和不可用。

'use strict';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class InputState extends Component {

    constructor(props) {
        super(props);

        this.state = { enable: false };
    }

    inputClick() {
        this.setState({ enable: !this.state.enable });
    }

    render() {

        return (
            <p>
                <input type="text" disabled={this.state.enable} />
                <button type="button" onClick={this.inputClick.bind(this)}>change input state</button>
            </p>
        );

    }

}

ReactDOM.render(<InputState />,
    document.getElementById("app")
);

refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

举个例子：

一个文本框输入内容，点击按钮获取内容。

 'use strict';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';

 class InputContent extends Component {

     getInputValue() {
         var inputValue = this.refs.myInput.value;
         alert(inputValue);
     }

     render() {

         return (
             <p>
                 <input type="text" ref="myInput" />
                 <button type="button" onClick={this.getInputValue.bind(this)}>get input value</button>
             </p>
         );

     }

 }

 ReactDOM.render(<InputContent />,
     document.getElementById("app")
 );

了解到了state和refs的用法，做一个简单的小功能吧。

一个文本框和一组数据，在文本框中输入内容，对这组数据进行过滤。

 'use strict';
 import React,{ Component } from 'react';
 import ReactDOM from 'react-dom';
 //小部件，渲染为ul列表
 class Items extends Component {
     render(){
         var arrLi = [];
         for(let i=0;i<this.props.info.length;i++){
         //注意，这里可不是拼接字符串！
         arrLi.push(<li key={i}>{this.props.info[i]}</li>);
         }
          return (<ul>{arrLi} </ul>);
     }
 }
 //大部件
 class Box extends Component {
     constructor(props){
         super(props);
         this.state = {
             list:this.props.sourceData
         }
      }
     checkSth(){
          var arr = [];
          //获取文本框信息
          var inputValue = this.refs.myInput.value;
         //获取props信息
         var sourceData = this.props.sourceData;
         //筛选数据
         for(let i=0;i<sourceData.length;i++){
             if(sourceData[i].indexOf(inputValue)!=-1){
                 arr.push(sourceData[i]);
             }
         }
      //更新状态机
         this.setState({list:arr});
     }
     render(){
          return (
              <div>
                 <input type="text" ref="myInput" onKeyUp={this.checkSth.bind(this)}/>
                 <Items info={this.state.list} />
             </div>
            );
     }
 }
 var data = ['jackson','milly','john smith','mike','jenny'];
 ReactDOM.render(
 <Box sourceData={data} />,
 document.getElementById('app')
 );

就这么多吧。

感觉一会不用，就渐渐的忘记了哇。

还是老套路：

点此下载说明和代码