React 认知五 state 状态

来源：互联网发布：中国进口贸易数据分析编辑：程序博客网时间：2024/05/22 09:51
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>
阅读全文
1 0
React 认知 五 state 状态

React 认知五 state 状态
