react state成员

组件中包括state，props与render成员函数。

react中，主要通过定义state，根据不同state渲染对应用户界面。

过程调用了成员函数setState（data，callback）。这个函数会合并data到this.state，并重新渲染组件。渲染完成之后调用可选的callback回调。多数情况下react负责视图更新。

举个例子：

var TextBoxComponent = React.createClass({

　　getInitialState:()=>{

　　　　return { enable:false};

　　handClick:()=>{

　　　　this.setState({enable:!this.state.enable})

　　render(){

　　　　return (

　　　　　　<p>

　　　　　　　<button onClick={this.handClick}> 改变textbook状态 </button>

　　　　　　</p>

　　　　);

　　}

});

ReactDOM.render(

　　<TextBoxComponent />,

　　document.getElementById(''reactContainer'')

);

过程中，组件最初有个初始状态，通过调用方法getInitialState获取，这个方法在组件初始化的时候执行，返回一个对象或者null。getInitialState返回的对象会自动合并到this.state上，可以通过”this.state.属性名”的方式来访问属性。

这里将enable这个值和input的disable绑定，当要修改这个属性时，要使用setState方法。声明handClick方法，来绑定button上面，实现state.enable的值。

当用户单击导致状态变化时，this.setState方法修改了状态值，每次修改后，this.render会被自动调用，从而自动渲染视图。

1.getInitialState函数必须有返回值，可以是null、false、一个对象。

2.访问state数据的方法是“this.state.属性名”。

3.变量用{}包裹，不需要再加双引号。

转载于:https://www.cnblogs.com/omiturix/p/10787778.html

react state成员相关推荐

前端框架--React props与React state
版权声明:本文为博主原创文章,未经博主允许不得转载. 二者区别 state 和props 主要的区别在于子组件通过props来传递数据,一旦外部传入数据后, props 不可改变. 而 state作为 ...
【Bug解决】Can‘t perform a React state update on an unmounted component. This is ＞ a no-op, but it...
在 React 应用程序中我们遇到以下警告消息: Can't perform a React state update on an unmounted component. This is a no- ...
Warning: Can‘t perform a React state update on an unmounted component. This is a no-op, but it indic
问题描述: 报错信息:Warning: Can't perform a React state update on an unmounted component. This is a no-op, b ...
React State和生命周期 3
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 一:组件的生命周期组件的生命周期可分成三个状态: 安装:已插入真实DOM 更新:正在被重新渲染卸载:已移出 ...
React state和props使用场景
一个组件的显示状态可以由内部状态state.外部参数props所决定. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读 ...
React State
State是组件的内存网页交互过程中,组件通常需要根据交互来更改屏幕上显示的内容.输入表单应该更新输入字段,单击图像轮播上的"下一步"应该更改显示的图像,单击"购买&q ...
react报错Can‘t perform a React state update on an unmounted component. This is a no-op, but it indicat
我们在react开发中经常遇到这个报错: 经过查阅资料后解决了这个报错,在这里记录一下. 这句话大概意思是:我们不能在组件销毁后设置更新状态state,防止出现内存泄漏的情况关于react中切换路由 ...
解决问题 Warning: Can‘t perform a React state update on an unmounted compo
由于组件中的state未能加载完成就切换页面导致报错解决办法在组件的卸载之前的周期 componentWillUnmount componentWillUnmount(){this.setState ...
React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...

react state成员

react state成员相关推荐

最新文章

热门文章