React基础篇（二）之点击button修改属性值

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

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

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

早起的年轻人博客专家

发布了354 篇原创文章 · 获赞 180 · 访问量 45万+

他的留言板关注

React基础篇（二）之点击button修改属性值

1 index.html 中

2 count.jsx 文件中

猜你喜欢