React中事件的调用

最新推荐文章于 2023-02-17 19:56:29 发布

全栈开发crud师

最新推荐文章于 2023-02-17 19:56:29 发布

阅读量197

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Sunraiseprice/article/details/121348089

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

这个博客演示了如何利用React创建一个显示当前时间并实时更新的时钟组件。通过引入React库和Babel编译器，定义了一个名为Clock的函数组件，该组件包含一个按钮，点击按钮会触发console.log('hehe')。此外，使用setInterval每秒更新组件，展示最新的日期和时间。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="example"></div>
  <script type="text/babel">
    //我们定义了一个组件
      function Clock(props) {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
            <button onClick={say} >点击</button>
          </div>
        );
      }

      function say(){
        console.log('hehe');
        
      }
      // class Clock extends React.Component {
      //   constructor(props) {
      //      super(props);
      //      console.log(this);
      //      console.log(props);   
      //      //this.say = this.say.bind(this);
      //   }
      //   say(){
      //     console.log('haha');
          
      //   }
      //   render() {
      //     return (
      //       <div>
      //         <h1>Hello, world!</h1>
      //         <button onClick={this.say} >点击</button>
      //         <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      //       </div>
      //     );
      //   }
      // }

      function tick() {
        ReactDOM.render(
          <Clock date={new Date()} />,
          document.getElementById('example')
        );
      }

      setInterval(tick, 1000);
    </script>
</body>

</html>

全栈开发crud师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React中事件的调用

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn
复制链接

扫一扫