React 第三节 向数据绑定及表单处理

最新推荐文章于 2024-07-26 17:45:07 发布
最新推荐文章于 2024-07-26 17:45:07 发布
阅读量155 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42549581/article/details/91662876
版权

今日分享：
React 双向数据绑定
表单处理
公共方法

表单
约束性和非约束性组件（受限/非受限）
<input type="text" value="123" />

//非约束性 value由原生的DOM管理
<input type="text" defaultValue="123" />
//约束性 由react管理了 value （value不再是死值，动态的处理）
<input type="text" value={this.state.value} />

非约束性公共表单封装

<!DOCTYPE html>
<html>
<head>
  <title>公共</title>
  <meta charset="UTF-8" />
  <script src="../lib/react.development.js"></script>
  <script src="../lib/react-dom.development.js"></script>
  <script type="text/javascript" src="../lib/babel.min.js"></script>
</head>

<body>
  <div id="my"></div>
  <script type="text/babel">
    class App extends React.Component {
      constructor(){
        super();
        this.state ={
          name:'',
          psd:'',
          phone:'',

        }
      }
      handleChange(event){
        var name = event.target.name
        console.log("name-",name)
        this.setState({
          [name]:event.target.value
        })
      }
      handleRadio(event){
        // var male = event.target.value=='man'?true:false
        this.setState({
          male:event.target.value
        })
      }
      handleSelect(event){
        this.setState({
          select:event.target.value
        })
      }
      handleSubmit(){
        console.log(this.state)
      }
      render(){
        var arr = ['北京','上海','广东']
        return (
          <div>
            <h1>约束性</h1>
            <h1>{this.state.value}</h1>
            <div>
              <label>姓名：</label>
              <input type="text" value={this.state.name} name="name" onChange={(event)=>{this.handleChange(event)}} />
            </div>
            <div>
              <label>密码：</label>
              <input type="password" value={this.state.psd} name="psd" onChange={(event)=>{this.handleChange(event)}} />
            </div>
            <div>
              <label>手机号：</label>
              <input type="text" value={this.state.phone} name="phone" onChange={(event)=>{this.handleChange(event)}} />
            </div>
            <div>
            <button onClick={()=>{this.handleSubmit()}}>提交</button>
            </div>

          </div>
        )
      }
    };
    ReactDOM.render(
      <App />,
      document.getElementById("my")
    );

    </script>
</body>
</html>

注册表单验证封装

<!DOCTYPE html>
<html>
<head>
  <title>注册</title>
  <meta charset="UTF-8" />
  <script src="../lib/react.development.js"></script>
  <script src="../lib/react-dom.development.js"></script>
  <script type="text/javascript" src="../lib/babel.min.js"></script>
</head>

<body>
  <div id="my"></div>
  <script type="text/babel">
    class App extends React.Component {
      constructor(){
        super();
        this.state ={
          name:'',
          psd:'',
          phone:'',
          male:'man',
          select:'北京',
          nameError:''
        }
      }
      handleChange(event){
        var name = event.target.name;
        var value = event.target.value;
        var filter = new RegExp(event.target.getAttribute('filter'));
        var error = ''
        if(!value){
          error='不能为空'
        }else if(!filter.test(value)){
          error='格式不对'
        }else{
          error=''
        }
        this.setState({
          [name]: event.target.value,
          [name+'Error']: error
        })
      }
      handleChange1(event){
        var value = event.target.value
        var filter = /^[\u4e00-\u9fa5]{2,4}$/
        var error = ''
        if(!value){
          error='不能为空'
        }else if(!filter.test(value)){
          error='格式不对'
        }else{
          error=''
        }
        this.setState({
          name:event.target.value,
          nameError:error
        })
      }
      handleRadio(event){
        // var male = event.target.value=='man'?true:false
        this.setState({
          male:event.target.value
        })
      }
      handleSelect(event){
        this.setState({
          select:event.target.value
        })
      }
      handleSubmit(){
        console.log(this.state)
      }
      render(){
        var arr = ['北京','上海','广东']
        return (
          <div>
            <h1>约束性</h1>
            <h1>{this.state.value}</h1>
            <div>
              <label>姓名：</label>
              <input type="text"
              value={this.state.name} name="name"
              onChange={(event)=>{this.handleChange1(event)}} />
              <span>{this.state.nameError}</span>
            </div>
            <div>
              <label>密码：</label>
              <input type="password"
              value={this.state.psd} name="psd"
              filter="^[a-zA-Z0-9]\w{5,17}$"
              onChange={(event)=>{this.handleChange(event)}} />
              <span>{this.state.psdError}</span>
            </div>
            <div>
              <label>手机号：</label>
              <input type="text"
              value={this.state.phone} name="phone"
              filter="^(13[0-9]|15[0|8]|18[0-9])\d{8}$"
              onChange={(event)=>{this.handleChange(event)}}
                      />
              <span>{this.state.phoneError}</span>
            </div>
            <div>
              <label>性别：</label>
              <input type="radio" name="male" checked={this.state.male=="man"?true:false} value="man" onChange={(event)=>{this.handleRadio(event)}} />男
              <input type="radio" name="male" checked={this.state.male=="woman"?true:false} value="woman" onChange={(event)=>{this.handleRadio(event)}} />女
            </div>
            <select value={this.state.select} onChange={(event)=>{this.handleSelect(event)}}>
              {
                arr.map((item,index)=>{
                  return <option value={item} key={index}>{item}</option>
                })
              }
            </select>

            <div>
            <button disabled={!this.state.name || this.state.nameError} onClick={()=>{this.handleSubmit()}}>注册</button>
            </div>

          </div>
        )
      }
    };
    ReactDOM.render(
      <App />,
      document.getElementById("my")
    );

    </script>
</body>
</html>
i'm_zhangting
关注
专栏目录
React学习笔记之八:表单数据的双向绑定
qq_24724109的博客
07-05 944
7.表单的双向数据绑定 具体代码可以参考我的github中的my-app 参考博文：React表单事件和取值 通常需要获取用户在表单内填写的信息，实现对于用户数据的获取并上传，因此表单数据的绑定十分重要，这次我们将对单选，下拉，输入分别进行数据的绑定 class Form extends Component { constructor(props) { super(props);...
React表单处理
network04的博客
11-18 1008
在React中关于表单分为两部分内容，受控组件和非受控组件。 4.7.1 受控组件 我们知道，在HTML中的表单元素是可以输入数据的（也可以进行删除），也就是有自己的可变状态。例如文本框，可以在文本框中输入内容，也可以进行删除，而输入的内容我们可以称之为可变的状态。而这个状态是有HTML表单元素自己维护的。 但是在React中，我们知道可变的状态通常保存在state中，并且只能通过setState方法来进行修改。 这时与HTML中的表单元素在状态的维护上产生了冲突。为了解决这个冲突，React将st
React（七）表单元素的绑定
小羽苏的博客
12-24 915
vue中通过v-model就可以双向绑定上表单元素，react需要自己去操作，这里就看一下怎样去绑定input，checkbox，select等元素
【React】详解受控表单绑定
最新发布
lph159的博客
07-26 444
受控组件是指表单元素的值由React组件的状态控制，而不是由DOM自己维护。通过在组件状态和表单元素之间建立绑定，React可以完全控制表单的行为和显示内容。是一个函数组件。组件内部使用useStateHook 创建了一个名为inputValue的状态变量和一个更新状态的函数。初始状态为一个空字符串。
React数据绑定
AQUROEAN
07-26 233
双向数据绑定 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <scri
React的表单数据绑定
暗武逢天的博客
05-17 888
双向绑定数据有一个非常形象的比喻,react是手动挡,vue是自动挡
react18【系列实用教程】双向绑定表单 （2024最新版）含受控组件、非受控组件、单行多行输入框 input，下拉选择 select，单选 radio，多选 checkbox，标签 label
朝阳39的博客
05-10 398
类似 vue 中的 v-model。
05 React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
03-01
总的来说，理解并熟练运用React的键盘事件、表单事件、事件对象和ref，以及如何模拟双向数据绑定，将使你在React开发中游刃有余，创造出更高效、更响应式的用户界面。通过深入学习和实践这些概念，你将能够构建出更...
react——react是什么 、jsx语法、 react的组件、模板语法 、事件 、表单的数据绑定、组件、组件传参 、生命周期
ranran0306的博客
08-18 1078
react——react是什么 、jsx语法、 react的组件、模板语法 、事件 、表单的数据绑定、组件、组件传参 、生命周期
【JavaScript源代码】浅谈React双向数据绑定原理.docx
12-30
在 Vue 中，双向数据绑定是通过 `Object.defineProperty`（在 Vue 2.x 中）或 `Proxy`（在 Vue 3.x 中）来实现的，而 React 需要开发者手动处理数据与视图间的交互。 **什么是双向数据绑定** 双向数据绑定意味着...
react-3（父子组件传值，引入样式，实现双向数据绑定）
weixin_45626517的博客
08-05 715
父子组件更改数据 父组件修改子组件state(不建议)： 父组件获取到子组件的实例（通过refs--(已被弃用)），通过子组件的setSate（）来更改子组件state 父组件 <Child ref="child"></Child> this.refs.child.setState({msg:'hello'}) 子组件改父组件state： 父组件传递修改自己的setState函数给子组件调用 父组件文件 //父组件 import React, { Comp
REACT_react表单数据绑定封装
小歪博客
07-02 183
import React from 'react'; class Index extends React.Component { state = { name:"", age:"" } change(event){ let name = event.target.name this.setState({[name]:event.target.value}) } render() { return ( <div className
React表单的双向数据绑定
King的博客
08-24 555
import React, { Component } from 'react'; class MyForm extends Component { constructor(props) { super(props); this.state = { // 页面显示男，女，传递后台数据male,female ge...
React之数据绑定以及表单处理
slom_fxt的博客
03-01 1200
像、、这样的表单元素不同于其他元素，因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易。设置了value的是一个受限组件，对于受限的，渲染出来HTML元素始终保持value属性的值，此时用户在渲染出来的组件里输入任何值都不起作用。杜宇不受限的input组件，渲染出来的元素直接反映用户输入。value用于、写一个完整的表单元素的实例。
React学习之旅----获取表单输入的值，双向绑定
瑞朋哥的博客
07-15 950
react中实现双向绑定input输入框值 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(props) this.state = { title: '事件对象练习', username: '' ...
react之旅（三）react 如何绑定数据、绑定属性、引入图片、循环数据
letianxf的博客
07-18 3806
本文主要讲解在react组件中如何绑定数据，绑定属性，引入图片，以及如何循环数据。 一、react如何绑定数据 在模板中（render函数返回的jsx部分）中，用{}来进行数据绑定： import React from 'react'; class Home extends React.Component{ constructor(props){ super(props); this.state = { name: "react",
React（三）状态值、样式、双向绑定、渲染(条件、列表)
热门推荐
商务合作 | 共同学习 | 携手共进
12-17 8万+
React：状态值state、样式、图片的使用、双向绑定、条件渲染、列表渲染
react学习笔记 item9 ---双向绑定（mixin）
诗渊的博客
11-23 4454
在 react 中要实现双向数据绑定，就得需要借助插件，LinkedStateMixin 是react 中数据双向绑定的辅助工具，利用 LinkedStateMixin 可以简化 react 中数据的双向绑定的实现。
react form表单
04-29
React是一个流行的JavaScript库，它可以用于构建复杂的用户界面。React表单是React组件的一部分，可以用于收集和验证用户输入的数据。...4. 可以使用第三方库如Formik和React Hook Form等来简化表单的处理和验证过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值