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 上

组件的数据传递