实例
var TestComponent= React.createClass({
getInitialState:function(){
return {contentValue:''}
},
ContentHandler:function(event){
console.log(event);
console.log(event.target.value)
this.setState({contentValue:event.target.value})
},
render:function(){
return (
<div>
<ul>
<input type="text" ref="textInput" onChange={this.ContentHandler} />
<li>{this.state.contentValue}</li>
<li>3</li>
</ul>
</div>
)
}
})
var Comp=React.createClass({
getInitialState:function(){
return {
divStyle:{
fontSize:'12px',
borderColor:'#0c9',
borderStyle:'solid',
borderWidth:'2px'
},
count:0,
}
},
render:function(){
return <div ref="head" style={this.state.divStyle} className="wm-h">{this.props.name} <h1>我就试试{this.props.title}</h1>
<button onClick={this.handleClick}>{this.state.count}</button>
</div>;
},
handleClick:function(event){
var d=this.refs.head;
console.log(this.refs.head)
d.style.background="#ccc";
this.setState(function(state){
return {count:state.count+1}
})
}
});
ReactDOM.render(<div>
<Comp name="666" title="44944"/>
<TestComponent></TestComponent>
</div>
,
document.getElementById('app')
);
同过 on + 驼峰事件名( 例如 onClick) 来添加时间绑定
<button onClick={this.handleClick}>{this.state.count}</button>
React .获取render component 的组件的dom节点:
使用 ref="nodeName";
以 this.refs.nodeName 获取实例的DOM 节点
input 的数据获取
<input type="text" ref="textInput" onChange={this.ContentHandler} />
input的数据获取
ContentHandler:function(event){
this.setState({contentValue:event.target.value})
}
监听change 事件 将数据绑定到 contentValue 上
组件的数据传递