React 事件 监听

实例

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 上

组件的数据传递