<!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>
React中事件的调用
最新推荐文章于 2023-02-17 19:56:29 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)