蓝鸥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零基础入门到项目实战 组件

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

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

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

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

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

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

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

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

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

React Native项目实战之搭建美团个人中心界面

在很多app应用型APP中,个人中心往往会单独出一个模块,而对于刚入门React Native的朋友来说,怎么去实现一些静态的页面,并且怎么着手实现,怎么分层,怎么去实现这个架构,我想是很基础的(ps...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:蓝鸥React Native零基础入门到项目实战 state
举报原因:
原因补充:

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