React.js学习（二）、三大属性statepropsref
2024-04-04 00:27:37
一、 组件实例对象属性state
- 简单示例
<script type="text/babel">//1.创建类式组件class StateComponent extends React.Component {constructor(props) {super(props)//初始化状态this.state = { isGood: true }//解决clickTitle中的this指向问题this.clickTitle = this.clickTitle.bind(this)}render() {console.log(this)const { isGood } = this.state// 点击事件使用onClickreturn <h2 onClick={this.clickTitle}>组件实例对象属性——state使用,很{isGood ? '好用' : '不好用'}</h2>}//点击执行函数clickTitle() {console.log('点击了标题')console.log(this)const { isGood } = this.state//更新状态this.setState({ isGood: !isGood })}}//2.渲染组件到页面ReactDOM.render(<StateComponent />, document.getElementById('test'))</script>
- 简写方式
<script type="text/babel">//1.创建类式组件class StateComponent extends React.Component {//初始化状态state = { isGood: true }render() {const { isGood } = this.state// 点击事件使用onClickreturn (<h2 onClick={this.clickTitle}>组件实例对象属性——state使用,很{isGood ? '好用' : '不好用'}</h2>)}//点击执行函数，自定义方法（使用监听函数）clickTitle = () => {const { isGood } = this.state//更新状态this.setState({ isGood: !isGood })}}//2.渲染组件到页面ReactDOM.render(<StateComponent />, document.getElementById('test'))</script>
组件实例对象属性props
- 简单示例
<!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入 react-dom 用于支持react操作DOM --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><!-- 生产环境中不建议使用 --><script src="../js/babel.min.js"></script><!-- 引入prop-types 用于对组件标签属性进行限制 --><script src="../js/prop-types.js"></script><script type="text/babel">//1.创建类式组件class Person extends React.Component {//构造器可以完全省略（开发中基本不使用）constructor(props){//构造器是否接受props，是否传递给super，取决于：是否希望在构造器中通过this访问propssuper(props)console.log(this.props)//如果不传给super，这里的this.props是空的}render() {const { name, sex, age } = this.props//props 是只读的不能修改return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>)}}// // 对标签属性进行类型、必要性的限制Person.propTypes = {name: PropTypes.string.isRequired, //限制name必传，切为字符串sex: PropTypes.string, //限制sex为字符串age: PropTypes.number, //限制age为数值speak: PropTypes.func,//限制speak为函数}// //指定默认标签属性值Person.defaultProps = {sex: '男', //sex默认值age: 18 //age默认值}//2.渲染组件到页面/*传值方式一*/ReactDOM.render(<Person name="晓果" age={18} sex="女" speak={speak} />, document.getElementById('test'))ReactDOM.render(<Person name="晓果" age={25} sex="女" />, document.getElementById('test1'))/*传值方式二*/const person = { name: '晓果', age: 25, sex: "女" }ReactDOM.render(<Person{...person} />, document.getElementById('test2'))function speak() {console.log('说话')}</script>
- 简写方式
<!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入 react-dom 用于支持react操作DOM --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><!-- 生产环境中不建议使用 --><script src="../js/babel.min.js"></script><!-- 引入prop-types 用于对组件标签属性进行限制 --><script src="../js/prop-types.js"></script><!-- 此处一定要写babel --><script type="text/babel">//1.创建类式组件class Person extends React.Component {// // 对标签属性进行类型、必要性的限制static propTypes = {name: PropTypes.string.isRequired, //限制name必传，切为字符串sex: PropTypes.string, //限制sex为字符串age: PropTypes.number, //限制age为数值speak: PropTypes.func,//限制speak为函数}// //指定默认标签属性值static defaultProps = {sex: '男', //sex默认值age: 18 //age默认值}render() {const { name, sex, age } = this.props//props 是只读的不能修改return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>)}}//2.渲染组件到页面/*传值方式一*/ReactDOM.render(<Person name="晓果" age={18} sex="女" speak={speak} />, document.getElementById('test'))ReactDOM.render(<Person name="晓果" age={25} sex="女" />, document.getElementById('test1'))/*传值方式二*/const person = { name: '晓果', age: 25, sex: "女" }ReactDOM.render(<Person{...person} />, document.getElementById('test2'))function speak() {console.log('说话')}</script>
组件实例对象属性ref
- 字符串形式
<script type="text/babel">//1.创建类式组件class Person extends React.Component {showData = () => {const { input1 } = this.refsconsole.log(input1.value)}showData2 = () => {const { input2 } = this.refsconsole.log(input2.value)}render() {return (<div><input ref="input1" type="text" placeholder="点击按钮提示数据" /> <button onClick={this.showData}>点我提示左侧的数据</button> <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /></div>)}}//2.渲染组件到页面ReactDOM.render(<Person />, document.getElementById('test'))</script>
- 回调函数形式
<script type="text/babel">//1.创建类式组件class Person extends React.Component {showData = () => {const { input1 } = thisconsole.log(input1.value)}showData2 = () => {const { input2 } = thisconsole.log(input2.value)}changeData=(c)=>{console.log(c)}render() {return (<div><input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" /> <button onClick={this.showData}>点我提示左侧的数据</button> <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /><br /><br />{/*内联函数的形式定义的，在更新过程中会被执行两次（既调用this.setState()），切第一次传入参数是null（既c等于null），然后第二次会参入参数DOM元素；但是无关紧要，正常开发中常使用这种方式<button ref={c => { this.input3 = c; console.log('内联函数的形式', c) }}>内联函数的形式</button>*/}<button ref={this.changeData}>类绑定函数的形式</button></div>)}}//2.渲染组件到页面ReactDOM.render(<Person />, document.getElementById('test'))</script>
- createRef形式
<script type="text/babel">//1.创建类式组件class Person extends React.Component {/*** React.crateRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,* 该容器只能存一个*/myRef = React.createRef()myRef2 = React.createRef()showData = () => {console.log(this.myRef.current)console.log(this.myRef.current.value)}showData2 = () => {console.log(this.myRef2.current)console.log(this.myRef2.current.value)}render() {return (<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /> <button onClick={this.showData}>点我提示左侧的数据</button> <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /></div>)}}//2.渲染组件到页面ReactDOM.render(<Person />, document.getElementById('test'))</script>
React.js学习（二）、三大属性statepropsref相关推荐
- React.js学习（一）：设计并实现一个“任务清单列表”
今日算是React.js学习的第一天,经过昨天前端基本知识的学习,让我能比较顺利的上手React框架.今日实践是一个网页记事清单,由于不是很熟练,任务删除还没写,懒得写的了,做个总结. 1.React ...
- React(Js)学习
React(Js)学习 网络请求的封装 //泛型T根据json格式规定相应的返回数据类型 async function request<T>(method: string, url: st ...
- React.js -学习总结1
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...
- three.js学习二
物体: 物体由两部分组成,材质和形状 形状: 物体的形状,球体,正方体,线条,粒子等 直线线条: var material = new THREE.LineBasicMaterial({//这是线段材 ...
- 网页3D效果库Three.js学习[二]-了解照相机
camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...
- React.js 学习
目录 Source Expression and statement: React styling: React Components React props Mapping data to comp ...
- Three.js学习二——Three.js极简入门
目录 准备开发环境 掌握一些概念性知识 编码测试 创建一个场景(Creating a scene) 创建一个场景 渲染场景 使立方体动起来 结果 准备开发环境 1.一台可用浏览器的带文件系统的电脑: ...
- three.js学习(二)
组.交互.dat.gui的使用 1.组 就像可以把一些THREE创建的物体放到场景里一样,也可以把物体放到组里,然后再把组放到场景里 为什么要这么做呢 ?(这不是脱裤子放屁) 可以把放进组的物体看作一 ...
- 【学习笔记】React.js
视频地址 https://www.bilibili.com/video/BV1wy4y1D7JT 入门 React是什么 使用 React 框架的程序,展现页面需要分三步: 发送请求获取数据 处理数据 ...
最新文章
- 体绘制（Volume Rendering）概述介绍
- 杰出数据科学家的关键技能是什么？
- php - Api 接口写法规范和要求
- 常用的7大排序算法汇总
- 批处理之字符串处理和数值计算
- 工业级光纤收发器使用“避坑”指南
- 58 SD配置-科目分配-定义科目代码
- AudioContextOptions
- C#(SuperWebSocket)与websocket通信
- 解决百度 ueditor v1.4.3 编辑器上传图片失真的bug？
- Elasticsearch6.3.0安装IK分词插件
- CF1042C Array Product
- php gd保存图片,PHP: GD - Manual
- 7-5 鸡兔同笼 C++编程练习
- 人工智能的现状分析和未来展望
- VMware+Ubuntu 20.04 画面卡住 verifying the installation configuration
- css基础-属性值计算过程
- 常用的平方根算法详解与实现
- 聂易铭：3月20日数字货币筑底失败，破位遥遥无期
- Cycle3-Group1