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')
);

 

就这么多吧。

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

 

还是老套路：

点此下载说明和代码