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 上

组件的数据传递