react系列---------React之组件
受控组件和非受控组件
import React, { Component } from 'react' export default class Forms extends Component { // 状态 自己的数据 constructor(props) { super(props); // 定义状态 this.state = { username: '' } } // 确保this指向为当前的组件对象 clickHandler = () => { console.log('clickHandler call...'); // 我们可以给 chrome 浏览安装 react developer tools 插件,帮组我们调试 react 项目 // this.state.username = 'new name'; // 尝试修改状态的值,因为状态的值变了,则表单空间的值也要变化。 // 这种修改不会触发视图的变化。 react建议使用 setState 方法修改 // console.log(this.state); // 看一下上面的操作是否真的有修改 username 的值 // 注意事项:1. 我们把需要更改的状态,直接对象传递即可。特点:1. 如果原先的state 里面存在该属性,则覆盖;如果不存在,则添加。如果我们对state里面的属性没有操作,则会保留 // 状态的变化引发了视图的变化,则我们叫做 单向数据流(之前的 vuejs 也是存在双向数据绑定)方向一 } changeHandler = (event) => { console.log('changeHandler call...'); console.log(event.target); // 当前操作受控的DOM对象 console.log(event.target.value); // 受控组件的value值 // onChange变化---方法二--state--方向一--视图变化(双向数据绑定) // 修改状态-->视图 this.setState({ username: event.target.value }) } getEmailHandler = (event) => { console.log(event.target.value); } checkEmailHandler = () =>{ // 由于我们在非受控组件内部通过 ref 属性传递一个函数,则我们可以直接通过属性读取该DOM ;原先:this.refs.xxx console.log( this.myEmail.value ); return; // vuejs 适合前端程序员 react 适合后端程序员 angular 更明显 适合 强类型语言的程序员 c java // 校验邮箱 由于是非受控的,则我们没办法通过 state 进行获取。 受控直接 state 即可。 react 对非受控组件提供的DOM的操作,可以获取值 ref属性 console.log('获取email值'); var emailVal = document.getElementById('email').value; // 1. 原生的DOM操作。 // 2. 官方提供了一个DOM操作的封装 console.log(emailVal); // 没有 $ this.$refs console.log(this.refs); console.log(this.refs.myEmail.value); // 可以编写一个 email正则去验证 // var reg = /^$/i; var reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; // 完全匹配 if( !reg.test( this.refs.myEmail.value )){ // console.log('邮箱不合法!'); window.alert("邮箱不合法!"); return; } console.log('邮箱合法'); ///................... } render() { return ( <div> <h2>forms组件-受控组件</h2> <button type="button" onClick={this.clickHandler}>按钮</button> <hr /> <p>{this.state.username}</p> <hr/> <label htmlFor="username">用户名:</label> {/* 当我们的表单控件的value值和类组件的state进行绑定后,则我们现在的表单控件的行为就收到state的控制,则我们把这个控件叫做 受控组件 */} {/* 尝试去修改状态的值,看表单控件里面的值是否发生变化 */} {/* 希望我们的受控的组件可以输入信息,则我们需要为受控的组件定义 onChange 事件 */} <input type="text" onChange={this.changeHandler} id="username" value={this.state.username} /> <hr/> <h2>forms组件-非受控组件</h2> {/* 表单控件的value值不收到 state 控制 */} <label htmlFor="email">邮箱:</label> {/* 必须叫 ref 属性的可以随意定 父子通信this.$refs 父找子 子找父 this.$parent */} {/* ref 的值可以是一个字符串,也可以是一个函数 */} {/* 使用函数的这种写法,相当于在组件内定义一个属性 属性的值为 myEmail ; this.myEmail = 当前DOM对象*/} {/* ref 形参代表当前的DOM对象 */} <input type="text" ref={ ref => this.myEmail = ref } id="email" onChange={this.getEmailHandler}/> <button onClick={this.checkEmailHandler}>校验邮箱是否合法</button> </div> ) } }
集思广益,仅供学习,侵权即删!!