蓝鸥React Native零基础入门到项目实战 state

原创 2016年12月29日 09:26:56

蓝鸥React Native零基础入门到项目实战 Hello React

http://edu.csdn.NET/course/detail/3129

state

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- react.js是React的核心库 -->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js的作用是提供与DOM相关的功能 -->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

  </head>
  <body>
    <!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
    <div id="container">

    </div>

  </body>
  <!-- 在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
  <!-- babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
  <script type="text/babel">

    // 在此处编写React代码

    /*
      事件处理

      react中的事件名称,首字母小写,驼峰命名法

      案例: 定义一个组件,组件中包含一个button,给button绑定onClick事件
     */

    // var MyButton = React.createClass({
    //   handleClick: function() {
    //     alert("点击按钮触发的效果");
    //   },
    //   render: function() {
    //     return (
    //       <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
    //     );
    //   }
    // });
    //
    // ReactDOM.render(
    //   <MyButton buttonTitle="按钮" />,
    //   document.getElementById("container")
    // );
    //
    //

    /*
      state 状态
      props
      组件自身的属性

      this.state
     */

    // 需求:创建一个CheckButton的组件,包含一个checkbox类型<input>
    // 复选框在选中和未选中两种状态下会显示不同的文字。即根据状态渲染

    var CheckButton = React.createClass({
      // 定义初识状态
      getInitialState: function() {
        return {
          // 在这个对象中设置的属性,将会存储在state中
          // 默认状态,未选中
          isCheck: false
        }
      },
      // 定义事件绑定的方法
      handleChange: function() {
        // 修改状态值,通过this.state读取设置的状态值
        this.setState({
          isCheck: !this.state.isCheck
        });
      },

      render: function() {
        // 根据状态值,设置显示的文字
        // 在JSX语法中,不能直接使用if,使用三目运算符
        var text = this.state.isCheck ? "已选中" : "未选中";

        return (
          <div>
            <input type="checkbox" onChange={this.handleChange} />
            {text}
          </div>
        );

      }
    });

    ReactDOM.render(
      <CheckButton />,
      document.getElementById("container")
    );

    // 当state发生变化时,会调用组件内部的render方法

  /*
      需求:定义一个组件,将用户在输入框内输入的内容进行实时显示

      分析:
      组件与用户交互过程中,存在状态的变化,即输入框的值
   */

    var Input = React.createClass({
      getInitialState: function() {
        return {
          value: "请输入"
        };
      },
      handleChange: function(event) {
        // 通过event.target.value读取用户输入的值
        this.setState({
          value: event.target.value
        });
      },
      render: function() {
        var value = this.state.value;
        return (
          <div>
            <input type="text" value={value} onChange={this.handleChange} />
            <p>{value}</p>
          </div>
        );
      }
    });

  ReactDOM.render(
    <Input />,
    document.getElementById("container")
  );





  </script>

</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。

蓝鸥React Native零基础入门到项目实战 Hello React

蓝鸥React Native零基础入门到项目实战 Hello React
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月27日 10:27
  • 509

蓝鸥React Native零基础入门到项目实战 组件

蓝鸥React Native零基础入门到项目实战 组件
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月27日 10:32
  • 386

零基础学习HTML5—html+css基础【蓝鸥出品】

零基础学习HTML5—html+css基础【蓝鸥出品】
  • lanoulongjiang
  • lanoulongjiang
  • 2016年09月14日 15:54
  • 902

【学习路线】蓝鸥React Native零基础入门到项目实战

【学习路线】蓝鸥React Native零基础入门到项目实战
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月28日 11:24
  • 619

蓝鸥React Native零基础入门到项目实战 props

蓝鸥React Native零基础入门到项目实战 props
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月27日 10:34
  • 857

蓝鸥Unity开发之C#入门视频课后习题汇总

蓝鸥Unity开发之C#入门视频课后习题汇总
  • sinat_35761779
  • sinat_35761779
  • 2016年10月13日 13:24
  • 359

[ReactNative入门到精通]React Native概述

2015年9月15日,Facebook发布了 React Native for Android,把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。什么是R...
  • yzzst
  • yzzst
  • 2015年10月11日 01:15
  • 11370

【公开课】蓝鸥Unity3D ——游戏/VR/AR开发

【公开课】蓝鸥Unity3D ——游戏/VR/AR开发
  • sinat_35761779
  • sinat_35761779
  • 2016年11月04日 15:09
  • 1548

React Native从入门到放弃

React Native从入门到放弃最近工作清闲,自己做了个技术调研,选的就是React Native。下面总结下最近一段时间对React Native的研究。Web基础 了解html与dom、jav...
  • xia215266092
  • xia215266092
  • 2016年05月15日 14:31
  • 6293

蓝鸥React Native零基础入门到项目实战 组件的生命周期

蓝鸥React Native零基础入门到项目实战 组件的生命周期
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016年12月29日 09:29
  • 531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:蓝鸥React Native零基础入门到项目实战 state
举报原因:
原因补充:

(最多只允许输入30个字)