React表单 (受控组件,非受控组件)

react中的表单不同于基本的dom操作他主要可分为受控组件和非受控组件

这里我们先创建一个react项目

这里我们就直接将代码写在App.jsx里了

App.jsx参考代码如下

import './App.css';
import React from "react";class App extends React.Component{constructor(props){super(props);this.state = {}}render(){return (<div className="App"><form></form></div>)}
}export default App;

这里我们建立一个基本的组件写了一个空的form表单
然后我们可以在form标签上绑定一个事件

<form onSubmit = { this.submit }>
</form>

react的 onSubmit是一个监听事件当表单提交时就会触发
然后这个submit 方法我们可以自己写一下

submit(){}

这里我就简答定义一下这个方法内容后面再写

然后我们在state中定义一个叫value 的空字符串

this.state = {value: ""
}

然后我们在form表单中写一个input输入框

<input type = "text" value = { this.state.value }></input>

可以看到我们这个输入框关联了this.state下的value值这样这个输入框就被我们的value管理了 value会和输入框的内容保持一致
这就是一种受控组件

但光这样写肯定是不行的

我们输入不了内容而且会报错意思就是少一个onChange事件来帮我们处理这个数据

我们将input的代码改一下

<input type = "text" onChange = { this.setValue } value = { this.state.value }></input>

这里绑定了 onChange 事件然后这里我们定义的方法名叫 setValue 这个你们可以根据自己的情况给方法命名
setValue参考代码如下

setValue = (event)=>{this.setState({value: event.target.value})
}

这样在输入这两个变量就同步了
内容就可以正常输入了

我们可以来测一下这个变量有没有和输入框同步

我们在form中定义一个提交按钮

<button type = "submit">提交</button>

现在点这个按钮表单就会提交
那么我们开始时说过 form上绑定的onSubmit事件就是用来监听表单提交的
我们给他绑定了一个 submit 方法
现在我们来写一下submit 方法的内容

submit = ()=>{console.log(this.state.value);
}

然后我们在表单提交的方法中打印了绑定input的state.value
但我们运行之后会出现点击提交一闪而过的问题
这是因为表单提交界面会跳转一下

我们将submit的代码改成

submit = (event)=>{event.preventDefault();console.log(this.state.value);
}

这就是一个js基础了表单的提交事件接受一个event 调用event中的preventDefault就可以阻止表单的默认行为他就不会乱跳了

然后我们再在输入框中输入一些内容
然后点击提交

这时我们就会发现输出在控制台上的this.state.value 和我们输入框的内容是同步的

当然大家可以设想一种情况如果我们有好多的表单元素他妈的值都需要控制难道每一个都写一个onChange 吗？
不是我说我都觉得麻烦

所以官方给我提供了第二种非受控组件

我们在constructor中定义几个虚拟元素控制
参开代码如下

 constructor(props){super(props);this.userName = React.createRef()this.password = React.createRef()this.number = React.createRef()this.state = {value: ""}
}

然后我们改写form代码

<form onSubmit = { this.submit }><input type = "text" onChange = { this.setValue } value = { this.state.value }></input><input type = "text" ref = { this.userName }></input><input type = "password" ref = { this.password }></input><input type = "text" ref = { this.number }></input><button type = "submit">提交</button>
</form>

这时我们新增加了三个输入框分别绑定了 userName password number 元素
然后我们改一下一下提交监听的submit方法

submit = (event)=>{event.preventDefault();console.log(this.userName.current);console.log(this.password.current);console.log(this.number.current);
}

然后我们点击提交

可以看到他打印的是这三个元素本身那如果我们想要用户输入的值呢？

console.log(this.userName.current.value);
console.log(this.password.current.value);
console.log(this.number.current.value);

直接在元素后面.value就好啦

当然一般情况建议大家还是用受控组件除非真的是我好多输入框写一大堆事件看着好乱就用非受控组件

React表单 (受控组件,非受控组件)相关推荐

reactjs中收集表单数据：非受控组件和受控组件
1_非受控组件 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
重新认识受控和非受控组件
该文章包含如下内容受控与非受控组件非受控组件受控组件受控和非受控组件边界反模式解决方案前言在 HTML 中,表单元素(<input>/<textarea>/< ...
查找DOM,受控与非受控组件
1.查找dom节点常用的方法有两种: 第一种常用的方法 1.在constructor中创建ref对象:this.变量 = React.createRef() 2.在标签中使用ref属性绑定创建的re ...
我们应该如何优雅的处理 React 中受控与非受控
受控 & 非受控今天来和大家简单聊聊 React 中的受控和非受控的概念. 提到受控和非受控相信对于使用过 React 的朋友已经老生常谈了,在开始正题之前惯例先和大家聊一些关于受控 &am ...
微信小程序（组件：路由、表单、媒体、自定义组件，插槽、组件通讯、侦听器、生命周期）
三.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
React 表单源码阅读笔记
1 概念 1.1 什么是表单实际上广义上的表单并不是特别好界定,维基上讲表单是一系列带有空格的文档,用于输写或选择.更具体的,在网页中表单主要负责数据采集的功能,我们下文中所提到的表单都指后者.如下 ...
React 表单与事件
一个简单的实例在实例中我们设置了输入框 input 值value = {this.state.data}.在输入框值发生变化时我们可以更新 state.我们可以使用 onChange 事件来监听 i ...
php中表单的非空验证,Javascript的表单与验证-非空验证_javascript技巧
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...
javascript 校验非空_Javascript的表单与验证-非空验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...

React表单 (受控组件,非受控组件)

React表单 (受控组件,非受控组件)相关推荐

最新文章

热门文章