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')
);
就这么多吧。
感觉一会不用，就渐渐的忘记了哇。
还是老套路：