网站建设流程是这样的,深圳设计网站排名,怎样建网站域名,成都网站编辑本文来自#React系列教程#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNAactiongetalbumalbum_id1566025152667107329) 一. refs 的使用
在React的开发模式中#xff0c;通常情况下不需要、也不建议直接操作DOM原生#xff0c;但是某些… 本文来自#React系列教程https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNAactiongetalbumalbum_id1566025152667107329) 一. refs 的使用
在React的开发模式中通常情况下不需要、也不建议直接操作DOM原生但是某些特殊的情况确实需要获取到DOM进行某些操作
管理焦点文本选择或媒体播放。触发强制动画。集成第三方 DOM 库。
1.1. 创建 ref 的方式
如何创建refs来获取对应的DOM呢目前有三种方式
方式一传入字符串 使用时通过 this.refs.传入的字符串格式获取对应的元素 方式二传入一个对象 对象是通过 React.createRef() 方式创建出来的使用时获取到创建的对象其中有一个current属性就是对应的元素 方式三传入一个函数 该函数会在DOM被挂载时进行回调这个函数会传入一个 元素对象我们可以自己保存使用时直接拿到之前保存的元素对象即可
代码演练
import React, { PureComponent, createRef } from reactexport default class App extends PureComponent {constructor(props) {super(props);this.titleRef createRef();this.titleEl null;}render() {return (divh2 reftitleString Ref/h2h2 ref{this.titleRef}Hello Create Ref/h2h2 ref{element this.titleEl element}Callback Ref/h2button onClick{e this.changeText()}改变文本/button/div)}changeText() {this.refs.title.innerHTML 你好啊,李银河;this.titleRef.current.innerHTML 你好啊,李银河;this.titleEl.innerHTML 你好啊,李银河;}
}1.2. ref 节点的类型
ref 的值根据节点的类型而有所不同
当 ref 属性用于 HTML 元素时构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性当 ref 属性用于自定义 class 组件时ref 对象接收组件的挂载实例作为其 current 属性你不能在函数组件上使用 ref 属性因为他们没有实例
这里我们演示一下ref引用一个class组件对象 import React, { PureComponent, createRef } from react;class Counter extends PureComponent {constructor(props) {super(props);this.state {counter: 0}}render() {return (divh2当前计数: {this.state.counter}/h2button onClick{e this.increment()}1/button/div)}increment() {this.setState({counter: this.state.counter 1})}
}export default class App extends PureComponent {constructor(props) {super(props);this.counterRef createRef();}render() {return (divCounter ref{this.counterRef}/button onClick{e this.increment()}app 1/button/div)}increment() {this.counterRef.current.increment();}
}函数式组件是没有实例的所以无法通过ref获取他们的实例
但是某些时候我们可能想要获取函数式组件中的某个DOM元素这个时候我们可以通过 React.forwardRef 后面我们也会学习 hooks 中如何使用ref
1.3 ref 转发
import React, { PureComponent, createRef } from react;function Home(props) {return (divh2 ref{props.ref}Home/h2button按钮/button/div)
}export default class App extends PureComponent {constructor(props) {super(props);this.homeTitleRef createRef();}render() {return (divHome ref{this.homeTitleRef}/button onClick{e this.printInfo()}打印ref/button/div)}printInfo() {console.log(this.homeTitleRef);}
}使用forwardRef
import React, { PureComponent, createRef, forwardRef } from react;const Home forwardRef(function(props, ref) {return (divh2 ref{ref}Home/h2button按钮/button/div)
})export default class App extends PureComponent {constructor(props) {super(props);this.homeTitleRef createRef();}render() {return (divHome ref{this.homeTitleRef}/button onClick{e this.printInfo()}打印ref/button/div)}printInfo() {console.log(this.homeTitleRef.current);}
}二. 受控组件
2.1. 认识受控组件
2.1.1. 默认提交表单方式
在React中HTML表单的处理方式和普通的DOM元素不太一样表单元素通常会保存在一些内部的state。
比如下面的HTML表单元素
formlabel名字:input typetext namename //labelinput typesubmit value提交 /
/form这个处理方式是DOM默认处理HTML表单的行为在用户点击提交时会提交到某个服务器中并且刷新页面在React中并没有禁止这个行为它依然是有效的但是通常情况下会使用JavaScript函数来方便的处理表单提交同时还可以访问用户填写的表单数据实现这种效果的标准方式是使用“受控组件”
2.1.2. 受控组件提交表单
在 HTML 中表单元素如input、 textarea 和 select之类的表单元素通常自己维护 state并根据用户输入进行更新。
而在 React 中可变状态mutable state通常保存在组件的 state 属性中并且只能通过使用 setState()来更新。
我们将两者结合起来使React的state成为“唯一数据源”渲染表单的 React 组件还控制着用户输入过程中表单发生的操作被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”
例如如果我们想让前一个示例在提交时打印出名称我们可以将表单写为受控组件
import React, { PureComponent } from reactexport default class App extends PureComponent {constructor(props) {super(props);this.state {username: }}render() {const {username} this.state;return (divform onSubmit{e this.handleSubmit(e)}label htmlForusername用户名: input typetext idusername onChange{e this.handleUsernameChange(e)} value{username}//labelinput typesubmit value提交//form/div)}handleUsernameChange(event) {this.setState({username: event.target.value})}handleSubmit(event) {console.log(this.state.username);event.preventDefault();}
}由于在表单元素上设置了 value 属性因此显示的值将始终为 this.state.value这使得 React 的 state 成为唯一数据源。
由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state因此显示的值将随着用户输入而更新。
2.2. 常见表单的处理
刚才我们演示的是一个input表单的处理这里我们再演示一下其他的情况。 2.2.1. textarea标签
texteare标签和input比较相似
import React, { PureComponent } from reactexport default class App extends PureComponent {constructor(props) {super(props);this.state {article: 请编写你喜欢的文章}}render() {return (divform onSubmit{e this.handleSubmit(e)}label htmlForarticletextarea idarticle cols30 rows10value{this.state.article}onChange{e this.handleArticelChange(e)}//labeldivinput typesubmit value发布文章//div/form/div)}handleArticelChange(event) {this.setState({article: event.target.value})}handleSubmit(event) {console.log(this.state.article);event.preventDefault();}
}2.2.2. select标签
select标签的使用也非常简单只是它不需要通过selected属性来控制哪一个被选中它可以匹配state的value来选中。
我们来进行一个简单的演示
import React, { PureComponent } from reactexport default class App extends PureComponent {constructor(props) {super(props);this.state {fruits: orange}}render() {return (divform onSubmit{e this.handleSubmit(e)}label htmlForfruitsselect idfruits value{this.state.fruits}onChange{e this.handleFruitsChange(e)}option valueapple苹果/optionoption valueorange橘子/optionoption valuebanana香蕉/option/select/labeldivinput typesubmit value提交//div/form/div)}handleFruitsChange(event) {this.setState({fruits: event.target.value})}handleSubmit(event) {console.log(this.state.article);event.preventDefault();}
}2.2.3. 处理多个输入
多处理方式可以像单处理方式那样进行操作但是需要多个监听方法
这里我们可以使用ES6的一个语法计算属性名Computed property names
let i 0
let a {[foo i]: i,[foo i]: i,[foo i]: i
}console.log(a.foo1) // 1
console.log(a.foo2) // 2
console.log(a.foo3) // 3let param size
let config {[param]: 12,[mobile param.charAt(0).toUpperCase() param.slice(1)]: 4
}console.log(config) // {size: 12, mobileSize: 4}我们进行对应的代码演练:
import React, { PureComponent } from reactexport default class App extends PureComponent {constructor(props) {super(props);this.state {username: ,password: }}render() {const {username, password} this.state;return (divform onSubmit{e this.handleSubmit(e)}label htmlForusername用户: input typetext idusername nameusernameonChange{e this.handleChange(e)} value{username}//labellabel htmlForpassword密码: input typetext idpassword namepasswordonChange{e this.handleChange(e)} value{password}//labelinput typesubmit value提交//form/div)}handleChange(event) {this.setState({[event.target.name]: event.target.value})}handleSubmit(event) {console.log(this.state.username, this.state.password);event.preventDefault();}
}三. 非受控组件
React推荐大多数情况下使用 受控组件 来处理表单数据
一个受控组件中表单数据是由 React 组件来管理的另一种替代方案是使用非受控组件这时表单数据将交由 DOM 节点来处理
如果要使用非受控组件中的数据那么我们需要使用 ref 来从DOM节点中获取表单数据。
我们来进行一个简单的演练
使用ref来获取input元素在非受控组件中通常使用defaultValue来设置默认值
import React, { PureComponent, createRef } from reactexport default class App extends PureComponent {constructor(props) {super(props);this.usernameRef createRef();}render() {return (divform onSubmit{e this.handleSubmit(e)}label htmlFor用户:input defaultValueusername typetext nameusername ref{this.usernameRef}//labelinput typesubmit value提交//form/div)}handleSubmit(event) {event.preventDefault();console.log(this.usernameRef.current.value);}
}同样input typecheckbox 和 input typeradio 支持 defaultCheckedselect 和 textarea 支持 defaultValue。
