React基础篇(二)之点击button修改属性值

本篇将实现点击一个按钮动态修改数据

上一篇 React 项目的初始化创建


1 index.html 中
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>启动页面</title>

  <!--React相关的依赖-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>

  <!--自定义的jsx-->
  <script type="text/jsx;harmony=true" src="count.jsx"></script>
</head>
<body>
 <!--配制dom一个标签-->
 <div id="content"></div>
</body>
</html>
2 count.jsx 文件中
class CountNumber extends React.Component {

  //在 JavaScript class 中,每次你定义其子类的构造函数时,都需要调用 super 方法。
  // 因此,在所有含有构造函数的的 React 组件中,构造函数必须以 super(props) 开头。
  constructor(props) {
    super(props);
    //在这里初始化 state
    this.state = {
      numberCount: null
    };
  }

  //外部调用此方法更新 numberCount 的值
  //例如在 浏览器中调用 root.update()
  update(){
    this.setState({numberCount:this.state.numberCount+=2})
  }

  // onClick 事件监听函数中调用 this.setState
  // 以在每次 <button> 被点击的时候通知 React 去重新渲染 当前CountNumber 组件
  // 组件更新之后 value 的值也改随之改变
  // 每次在组件中调用 setState 时,React 都会自动更新其子组件。
  render() {
    return (
        <button className="square" onClick={() => this.setState({numberCount: ++this.state.numberCount})}>
          点击button {this.state.numberCount}
        </button>
    );
  }

}

//ReactDOM.render(...) 是渲染方法,所有的 js,html 都可通过它进行渲染绘制
//参数一 可以是一个 React 部件,也可以是一段HTML或TEXT文本,在这里使用的是 React 部件
//参数二 是DOM中HTML的节点对象
// 这里使用了 root 变量记录了 ReactDOM 渲染后的组件,可以在浏览器中使用 root 来进行一系列操作
root = ReactDOM.render(
    <CountNumber/>,
    //这里的 content 就是刚刚我们定义的div 的 id
    document.getElementById('content')
);

运行程序

npm run dev 

在这里插入图片描述
或者在浏览器控制台中外部调用方法
在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页