React受控组件与非受控组件详细介绍_React_

# value={this.state.xx} 事件onChange=“方法，修改state中的数据”  注：多表单元素需优化事件方法 this.setState({ [e.target.name]: e.target.value }) 

import React, { Component } from 'react'; class App extends Component { state = { username: '', password: '' } setValue = name => evt => { this.setState({ // 变量的值当前对象的key，写法 [name]: evt.target.value.trim() }) } login = () => { console.log(this.state); } render() { let { username, password } = this.state return ( 
 {/* 表单项中的value值，通过state中的属性值来赋值的，叫受控组件 受控组件： value={this.state.xx} 事件onChange=“方法，修改state中的数据” */} 
登录一下
 ); } } export default App;

export default _this => ({ username: { value: '', onChange: e => _this.setState(state => ({ username: { ...state.username, value: e.target.value } })) }, password: { value: '', onChange: e => _this.setState(state => ({ password: { ...state.password, value: e.target.value } })) } }) 

import React, { Component } from 'react'; import loginForm from './form/loginForm'; class App extends Component { state = { ...loginForm(this), num: 100 } login = () => { console.log(this.state); } render() { let { username, password } = this.state return ( 
 {/* 相当于 value={username} onChange={this.setValue('username')} */} 
登录一下
 ); } } export default App;

import React, { Component } from 'react'; class App extends Component { state = { username: '', sex: '女', isshow: true, lessons: ['html', 'js'] } setLessonsFn = e => { if (e.target.checked) { this.setState(state => ({ lessons: [...state.lessons, e.target.value] })) } else { this.setState(state => ({ lessons: state.lessons.filter(item => item != e.target.value) })) } } login = () => { console.log(this.state); } render() { let { username, sex, isshow,lessons } = this.state return ( 
 this.setState({ username: e.target.value })} />
 {/* 单选 */}  this.setState({ sex: e.target.value })} />男  this.setState({ sex: e.target.value })} />女 
 {/* 单个复选框 */}  this.setState({ isshow: e.target.checked })} /> 显示与隐藏 
 {/* 多个复选框 */} 
html css js 
登录一下
 ); } } export default App; 

import React, { Component } from 'react'; import UserTable from './components/UserTable'; class App extends Component { state = { username: '', password: '', show: false, } // 通过onChange事件来修改state中对应属性变化 setUsername = evt => { // console.log(evt.target.value.trim()); this.setState({ username: evt.target.value.trim() }) } setPassword = evt => { this.setState({ password: evt.target.value.trim() }) } setValue = name => evt => { this.setState({ // 变量的值当前对象的key，写法 [name]: evt.target.value.trim() }) } submit = () => { if (this.regExpValue(this.state.username, "username") && this.regExpValue(this.state.password, "password")) { alert("登录成功!") this.login() } else { alert("正则验证失败,请重新输入!") } } regExpValue = (value, key) => { if (key === "username") { return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) || /^1[3-9][0-9]{9}$/.test(value); } else { return /(?=.*?[A-Za-z])(?=.*?[0-9]).{3,}/.test(value); } } login = () => { // this.setState.show=true this.setState({ show: true }); console.log(this.state.show); } render() { let { username, password, show } = this.state return ( 
 {/* 表单项中的value值，通过state中的属性值来赋值的，叫受控组件 受控组件： value={this.state.xx} 事件onChange=“方法，修改state中的数据” */} 
登录一下
 { this.state.show ?  : 
不显示
 } 
 ); } } export default App;

import { getElementError } from '@testing-library/react'; import React, { Component } from 'react'; class UserTable extends Component { state = { users: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 4, name: '赵六' }, ], isshow: true, uids: [], tip: '全选', } all = e => { e.target.checked ? this.setState(state => ({ uids: state.users.map(({ id }) => id), tip: '取消全选' })) : this.setState({ uids: [], tip: '全选' }) console.log(this.state.uids); } select = tid => e => { let all = document.querySelector(".all"); if (e.target.checked) { setTimeout(() => { this.setState(state => ({ uids: [...state.uids, tid] })) if (this.state.uids.length === 4) all.checked = true }, 0); } else { setTimeout(() => { this.setState(state => ({ uids: state.uids.filter(item => item != tid) })) all.checked = false console.log(this.state.uids); }, 0); } } del = tid => () => { this.setState(state => ({ users: state.users.filter(({ id }) => id !== tid) })) } render() { let { users, uids, tip } = this.state return ( 
{tip} 
 { users.map(({ id, name }) => ( 
{name} -- {id}删除
 )) } 
 ); } } export default UserTable;

class App extends React.Component { constructor(props){ super(props) //创建 ref this.username = React.createRef() } // 获取文本框的值 fn =() => { console.log(this.username.current.value) } render(){ return ( 
获取值
 ) } }

// createRef 通过此方法得到一个ref实例对象 // ref 如果绑定在普通的html元素中则返回dom对象 // ref 如果绑定在"类组件"中，则返回当前自定义类组件实例对象，可以用它来完成组件通信 import React, { Component, createRef } from 'react' class App extends Component { // 创建得到一个ref实例对象 usernameRef = createRef() getUsernameInput = () => { // 通过ref绑定好的对象，来完成对应表单项数据的获取 console.log(this.usernameRef.current.value) } render() { return ( 
获取表单项中的数据
 ) } } export default App

import React, { Component, createRef } from 'react' class App extends Component { // 创建得到一个ref实例对象 usernameRef = createRef() isShowRef = createRef() // 等同于：lessonsRefs = [createRef(), createRef(), createRef()] lessonsRe
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：React生命周期函数深入全面介绍_React_
                                                                
下一篇：React中props使用教程_React_