界面事件

事件应用实践

表单事件与输入校验

鼠标事件与悬浮反馈

触摸事件与 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>;
};
上一页
下一页