React事件监听和State状态修改方式_React_

class Dog extends Component {   bark () {     console.log('bark')   }      run () {     console.log('run')   }      render () {     return (
{         this.bark();         this.run();       }     }>DOG
)     } } ReactDOM.render(,document.querySelector('#root'));

class Dog extends Component { constructor () { super() this.state={ bark:false, run:false } } clickYeah () { this.setState({ bark: true, run: true }) //因为setState会有缓存，值后面才会变，所以这里打印出来还是false console.log('bark'+this.state.bark); console.log('run'+this.state.run); setTimeout(()=>{ //1s之后将值改回成false，所以这里打印出来还是false。如果想要检验前面修改成true有没有生效，可以将这里setState修改成false的步骤先注释掉 this.setState({ bark: false, run: false }) console.log('bark'+this.state.bark+'run'+this.state.run); },1000) } render () { return (
DOG
) } } ReactDOM.render(,document.querySelector('#root')); 

 var TestClickComponent = React.creatsClass({ handleClick: function(event){ //操作DOM节点 var msg = React.findDOMNode(this.refs.tip); if(msg.style.display === 'none'){ msg.style.display = 'inline'; }else{ msg.style.display = 'none'; }

 //阻止事件的冒泡和默认行为 event.stopPropagation(); event.preventDefault(); }, render: function(){ return( 
显示/隐藏message
 ); } });

var TestInputComponent = React.createClass({ getInitialState: function(){ return{ inputContent: ' ' } }, changeHandler:function(event){ //改变state的值 this.setState({ inputContent:event,target.value }); event.preventDefault(); event.stopPropagation(); }, render: function(){ return( 
{this.state.inputContent}
 ); } });