事件应用实践
表单事件与输入校验
鼠标事件与悬浮反馈
触摸事件与 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>;
};