React 认知五 state 状态

最新推荐文章于 2021-08-24 20:05:10 发布

Carlos.Guo

最新推荐文章于 2021-08-24 20:05:10 发布

阅读量549

点赞数 1

分类专栏： React 文章标签： react-state

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

React 中state状态在其中具有灵魂的意义。

千变万化，使程序更活跃。

<!DOCTYPE　html>
<html>
<head>
    <meta CHARSET="UTF-8">
    <title></title>

    <!--react.js 是react的核心库-->
    <script src="./build/react.js"></script>
    <!--react-dom.js 提供与dom相关的功能-->
    <script src="./build/react-dom.js"></script>
    <!--browser.main.js 将jsx转化为js语法-->
    <script src="./build/browser.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>-->
</head>
<body>
<!--React 渲染的模板内容 会插入到这个dom节点中，作为一个容器-->
<div id="container">

</div>

</body>
<!--在react的开发中 使用jsx 跟js不兼容 在使用是 使用babel-->
<!--babel是一个转换编译器，es6转换成浏览器运行的代码-->
<script type="text/babel">
    //此处 编写react
    /*
     事件处理
     react 中事件 名称 首字母小写 驼峰命名方法
     案例：定义一个组件，组件中包含一个button 给button绑定onclick事件
     */
    /* let 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
     组件自身的属性

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

    /* let CheckButton = React.createClass({
     getInitialState: function () {
     return {
     //在这个对象中设置的属性将会被存储在state中
     //默认状态未选中
     isCheck: false
     }
     },

     //定义是件绑定的方法
     handleChange: function () {
     //修改状态值，通过this.state读取设置的值状态
     this.setState({
     isCheck: !this.state.isCheck
     }
     );
     },

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

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

     ReactDOM.render(
     <CheckButton/>,
     document.getElementById("container")
     );
     //当state 发生变化时，会调用组件内部的render方法*/


    /*
     需求： 定义一个组件，将用的输入框的输入内容进行实时显示
     分析：
     组件和用户户交互过程中，存在状态的变化，即输入框的值
     */

    let Input = React.createClass({
        getInitialState: function () {
            return {
                value: "请输入"
            };
        },

        handleChange:function (event) {
            this.setState({
                value:event.target.value
            })
        },

        render:function () {
            let 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>

Carlos.Guo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 认知五 state 状态

React 中state状态在其中具有灵魂的意义。千变万化，使程序更活跃。 --> //此处编写react /* 事件处理 react 中事件名称首字母小写驼峰命名方法案例：定义一个组件，组件中包含一个button 给
复制链接

扫一扫