界面事件

返回目录

事件应用实践

表单事件与输入校验

鼠标事件与悬浮反馈

触摸事件与 onTouchTap

浏览器监听

缩放监听

class WindowWidth extends React.Component {
constructor(props) {
super(props);
this.state = { width: 0 };
}
componentDidMount() {
this.setState({ width: window.innerWidth });
window.addEventListener('resize', ({ target }) => {
this.setState({ width: target.innerWidth });
});
}
render() {
const { width } = this.state;
const { Width } = this.props;
return <Width width={width} />;
}
}
<WindowWidth Width={DisplayWindowWidthText} />;
const DisplayDevice = ({ width }) => {
let device = null;
if (width <= 480) {
device = 'mobile';
} else if (width <= 768) {
device = 'tablet';
} else {
device = 'desktop';
}
return <div>you are using a {device}</div>;
};