ReactNative--state

事件处理

React中的事件名称,组件中包含一个button,给button绑定onClick事件

定义一个组件: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="button"/>,
      document.getElementById("container")
    );

state 状态

props 组件自身的属性

    var CheckButton = React.createClass({
      getInitialState:function () {
        return{
          isCheck:false
        }
      },
      handleChange:function () {
        this.setState({
          isCheck:!this.state.isCheck
        });
      },
      render:function () {
        //在jsx语法中,不能直接使用if,使用三目运算符
        var text = this.state.isCheck ? "yes" : "no";
        return(
          <div>
            <input type="checkbox" onChange={this.handleChange} />
            {text}
          </div>
        );
      }
    });

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

//当state发生变化时,会调用组件内部的render方法
时间: 2024-10-13 22:14:06

ReactNative--state的相关文章

react-native 登录页面问题总结

react-native 登录事件是onPress={this.login} 如果写成onPress={this.login()}则回调函数失效!!! react-native state变量,只要有一个变化全局性重新渲染刷新! 注意TextInput 输入框在监听state变量时一定要使用onTextChange={(username)=>setState({username})},只有这样this.state.username才能读取真实的值,如果写成onSubmttingEditing或者

React-Native做一个文本输入框组件

我又回来啦! 由于最近一直在做公司的项目,而且比较急.如今项目已经迭代到第三期,可以缓一缓了... 今天在公司里听前端的说,这个项目本来是用React-Native做的(去年10月份),但是做到一半发现坑太多,就中途放弃了,于是让我们android和iOS重新开发... 作为非常喜欢这个技术的我来说,表示相当的不服. 于是我打算利用闲暇时间做一个一模一样的出来,反正接口我都有(嘻嘻) 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了. 好了,废话不多

react-native 生命周期

1 import React, { Component } from 'react'; 2 import { 3 AppRegistry, 4 StyleSheet, 5 Text, 6 View 7 } from 'react-native'; 8 9 export default class mykblearn extends Component { 10 constructor(props){ 11 super(props) 12 this.state={times:0} 13 } 14

react-native http请求之后navigator导航跳转

琢磨react-native有一段时间了.对于我来说,它的确是前端开发工作者的福音,因为我可以利用它来写app的代码,而且基本可以一套代码,多个平台使用. 早就想写一篇随笔记录一下react native的学习历程了,可是最近在navigator(导航,可以理解为‘页面’跳转)这里遇到了一个比较棘手的问题,所以耽搁了两天,中途甚至产生过放弃的念头,还一度去看了ionic以及QT的demo,思前想后,经过对比,发现还是react-native比较自己.刚好今天也将困扰已久额问题解决了,心情大好啊.

ReactNative入门(安卓)——API(上)

Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, Component, StyleSheet, Alert, Text, View } from 'react-native'; class AwesomeProject extends Component { componentDidMount(){ Alert.alert( 'Alert标题', '

react-native学习笔记二

今天来写一个组件,相信很多人都会用到的——ViewStack. ViewStack组件无疑是UI中很重要的一个组件,可惜react-native并没有内嵌进去,需要开发者自己去实现. 实现原理很简单,就是根据索引来显示一个子视图,用一个render即可完成: 1 render(){ 2 return( 3 <View> 4 {this.props.children[this.props.index]} 5 </View> 6 ); 7 } 这样,一个最简单的ViewStack就完成

React-Native之IOS本地模块的应用实践分享(仅此一篇足以...)

前言 React-Native从诞生至今,火热程度已经不言而喻,在不断的框架迭代过程中,RN也提供了丰富的组件,以供开发者使用,但是在实际应用中,我们可能需要更为丰富的交互组件,但是RN中又没有及时提供,这时候我们就需要使用RN的本地模块,本地模块即可以使用JS调用Native,也可以使用Native调用JS, 并传递各种参数,实现完整功能,接下来我们看看具体的使用方法,方便大家参考学习,如果想了解更多,我们可以查阅官方的文档. 下面文章中,我会经常用到RN,即为React Native的缩写,

React Native props &amp; state

今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下,跟props一样都是 this.props.propertyName this.state.stateName 这种形式,props和state是控制组件的两种类型,props是开发者自定义的组件参数,state表达的是一种状态用于控制组件的内容 /** * Sample React Native

《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)

ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的. 今天我们来实现一个iOS和Android通用的上拉刷新功能. 下面简要介绍下我实现的思路. 如果你对ListView的基础知识不是很清楚,建议先移步:<React-Native系列>16. RN组件之ListView 思路: 1.常量定义: const moreText = "加载完毕"; //foot显示的文案 //页码 var pageNum

ReactNative入门 —— 动画篇(上)

在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject = React.createClass({ getInitialState() { return { w: 200, h: 20 } }, _onPress() { //每按一次增加近30宽高 var count = 0; while(++count<30){ requestAnimationFra