React事件监听和State状态修改
on*函数可直接使用，但只能使用在html标签上，自己创建的组件标签不可
组件可以增加state状态，修改用setState方法，修改会有缓存，只能保证在渲染到页面之前会改好。所以setState后立马去使用值可能是不对的
狗子组件1：点击会打印bark和run
class Dog extends Component {
bark () {
console.log('bark')
}
run () {
console.log('run')
}
render () {
return (<div onClick={
//有两个方法需要实现，所以用一个函数进行封装
()=>{
this.bark();
this.run();
}
}>DOG</div>)
}
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));狗子组件2：增加bark和run状态，开始为false，点击变成true，1s后还原成false
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 (<div onClick={this.clickYeah.bind(this)}>DOG</div>)
}
}
ReactDOM.render(<Dog/>,document.querySelector('#root'));
React事件监听相关例子
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(
<div>
<button onClick={this.handleClick}>显示/隐藏</button>
<span ref="tip">message</span>
</div>
);
}
});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(
<div>
<input type="text" onChange={this.changeHandler}/>
<span>{this.state.inputContent}</span>
</div>
);
}
});以上为个人经验，希望能给大家一个参考，也希望大家多多支持阿兔在线工具。
