dom事件绑定模板
官网的示例
class class extends React.Component {
constructor(props) {
super(props);
this.state = {number: 0};
// 为了在回调中使用 `this`,这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick(e,id) {
//为了能够修改后渲染到dom,这种写法也是要得
this.setState(state => ({
number: state.number + 1
}));
}
render() {
return (
//为了可以传入参数,需要这样写
<button onClick={(e) => this.handleClick(e,id)}>
{this.state.number}
</button>
);
}
}
常用的生命周期函数
componentDidMount() {
//组件被渲染执行
}
componentWillUnmount() {
//组件被移出执行
}
ref绑定dom元素
constructor(props) {
this.demo = React.createRef();
}
function(){
this.demo.current
}
render() {
return(
<div ref={this.demo}></div>
)
}
鼠标移入移出事件子元素的验证处理
//先给父元素绑定上ref能够获取到元素
domEvent(event){
if(!this.parent.current.contains(event.relatedTarget)){ //判断是否不是子元素
}
}
默认props
static defaultProps = {};
常用的dom事件
onMouseOver //鼠标移入
onMouseOut //鼠标移出
onClick //点击事件