React表单详解

最新推荐文章于 2024-02-28 15:16:55 发布
最新推荐文章于 2024-02-28 15:16:55 发布
阅读量4.5k 收藏 6
点赞数 2
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013063153/article/details/52503164
版权
一、不可控组件和可控组件
不可控组件：<input type="text" defaultValue="HelloWorld"/>数据写死。
可控组件：<input type="text" defaultValue={this.state.value}/>
为什么组件要可控：
符合React的数据流
数据存储在state中，便于使用
便于对数据进行处理

不可控组件代码： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    /*var MyForm = React.createClass({
        render:function () {
            return <input type="text" defaultValue="HelloWorld!"/>
        }
    });*/

    var MyForm = React.createClass({
        submitHandler:function (event) {
            event.preventDefault();
            var HelloTo = React.findDOMNode(this.refs.helloTo).value;alert(HelloTo);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <input type="text" ref="helloTo" defaultValue="Hello World"/><br/>
                <button type="submit">Speak</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

可控组件代码： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                helloTo:"helloworld"
            };
        },
        handleChange:function () {
            this.setState({
                helloTo:event.target.value
            });
        },
        submitHandler:function (event) {
            event.preventDefault();
            alert(this.state.helloTo);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.helloTo} onChange={this.handleChange}/><br/>
                <button type="submit">Speak</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

二、不同表单元素的使用
<label htmlFor="name">Name</label>
<input type="checkbox" value="A" checked={this.state.checked} onChange={this.handleChange}/>
<textarea value={this.state.helloTo} onChange={this.handleChange}/>
<select value={this.state.helloTo} onChange={this.handleChange}> <option value="one">1</option></select>
实例代码如下： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                username:"",
                gender:"man",
                checked:true
            };
        },
        handleUsernameChange:function () {
            this.setState({
                username:event.target.value
            });
        },
        handleGenderChange:function (event) {
            this.setState({
                gender:event.target.value
            });
        },
        handleCheckboxChange:function (event) {
            this.setState({
                checked:event.target.checked
            });
        },
        submitHandler:function () {
            event.preventDefault();
            console.log(this.state);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange}/><br/>
                <select value={this.state.gender} onChange={this.handleGenderChange}><option value="man">男</option>
                    <option value="woman">女</option></select>
                <br/>
                <label htmlFor="checkbox">同意用户协议:</label>
                <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange}/>
                <button type="submit">注册</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>
三、事件处理函数复用
onChange={this.handleChange1}
onChange={this.handleChange2}
onChange={this.handleChange3}
onChange={this.handleChange4}
...
最好的处理方式是：处理成一个onChange={this.handleChange}
(1)bind复用
handleChange:function(name, event){
    ...
}
{this.handleChange.bind(this,'input1')}
实例代码如下： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                username:"",
                gender:"man",
                checked:true
            };
        },
        handleChange:function (name,event) {
          var newState = {};
          newState[name] = name == "checked"?event.target.checked:event.target.value;
          this.setState(newState);
        },
        submitHandler:function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this,"username")}/><br/>
                <select value={this.state.gender} onChange={this.handleGenderChange}><option value="man">男</option>
                    <option value="woman">女</option></select>
                <br/>
                <label htmlFor="checkbox">同意用户协议:</label>
                <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this,"checkbox")}/>
                <button type="submit">注册</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

(2)name复用
handleChange:function(event){
    var name = event.target.name
}
{this.handleChange}
实例代码如下： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./build/react.js"></script>
<script src="./build/JSXTransformer.js"></script>
<script type="text/jsx">
    var MyForm = React.createClass({
        getInitialState:function () {
            return{
                username:"",
                gender:"man",
                checked:true
            };
        },
        handleChange:function (event) {
          var newState = {};
          newState[event.target.name] = event.target.name == "checked"?event.target.checked:event.target.value;
          this.setState(newState);
        },
        submitHandler:function (event) {
            event.preventDefault();
            console.log(this.state);
        },
        render:function () {
            return <form onSubmit={this.submitHandler}>
                <label htmlFor="username">请输入用户名:</label>
                <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange}/><br/>
                <select name="gender" value={this.state.gender} onChange={this.handleGenderChange}><option value="man">男</option>
                    <option value="woman">女</option></select>
                <br/>
                <label htmlFor="checkbox">同意用户协议:</label>
                <input name="checked" id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange}/>
                <button type="submit">注册</button>
            </form>
        }
    });
    React.render(<MyForm></MyForm>,document.body
    );
</script>
</body>
</html>

四、表单组件自定义
为什么要自定义表单组件：
内因：本身具有特殊性：样式统一、信息内聚、行为固定
外因：本质上是组件嵌套

不可控的自定义组件：
代码如下： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var Radio = React.createClass({
        getInitialState: function () {
            return {
                value: this.props.defaultValue
            };
        },
        handleChange: function (event) {
            if (this.props.onChange) {
                this.props.onChange(event);
            }
            this.setState({
                value: event.target.value
            });
        },
        render: function () {
            var children = {};
            var value = this.props.value || this.state.value;
            React.Children.forEach(this.props.children, function (child, i) {
                var label = <label>
                    <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                    {child.props.children}
                    <br/>
                </label>;
                children['label' + i] = label;
            }.bind(this));
            return <span>{children}</span>;
        }
    });
    var MyForm = React.createClass({
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.refs.radio.state.value);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <Radio ref="radio" name="my_radio" defaultValue="B">
                    <option value="A">First Option</option>
                    <option value="B">Second Option</option>
                    <option value="C">Third Option</option>
                </Radio>
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
可控组件，示例代码如下：
 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
    var Radio = React.createClass({
        getInitialState: function () {
            return {
                value: this.props.defaultValue
            };
        },
        handleChange: function (event) {
            if (this.props.onChange) {
                this.props.onChange(event); }
            this.setState({
                value: event.target.value
            });
        },
        render: function () {
            var children = {};
            var value = this.props.value || this.state.value;
            React.Children.forEach(this.props.children, function (child, i) {
                var label = <label>
                    <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                    {child.props.children}
                    <br/>
                </label>;
                children['label' + i] = label;
            }.bind(this));
            return <span>{children}</span>;
        }
    });
    var MyForm = React.createClass({
        getInitialState: function () {
            return {my_radio: "B"};
        },
        handleChange: function (event) {
            this.setState({
                my_radio: event.target.value
            });
        },
        submitHandler: function (event) {
            event.preventDefault();
            alert(this.state.my_radio);
        },
        render: function () {
            return <form onSubmit={this.submitHandler}>
                <Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
                    <option value="A">First Option</option>
                    <option value="B">Second Option</option>
                    <option value="C">Third Option</option>
                </Radio>
                <button type="submit">Speak</button>
            </form>;
        }
    });
    React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>

u013063153
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react中对import React,{Component} from 'react'写法的解释，以及react中常见import的用法
Easylee的博客
10-17 9920
一.对import React,{Component} from 'react'写法的解释 首先关于一下写法①的解释 ① importReact,{Component}from'react' 作用相当于下面②和③这两句话 ②默认导入(default import)：导入react模块（组件）中的默认组件，并且命名为React import React from 'react...
React-表单详解
明明的博客
03-21 1万+
一、表单事件 React支持所有的HTML事件，这些事件遵循驼峰命名的约定，且会转成合成事件，这些事件是标准化的，提供饿了跨浏览器的一致接口。 所有合成事件提供了event.target来访问触发事件的DOM节点。 handleEvent：funciton(syntheticEvent){ var DOMNode=syntheticEvent.target; var newValue
React开发总结6:Form表单
huihui_999的博客
05-29 3945
表单是应用程序中最重要的部分之一.通过表单,我们可以从用户那里获得丰富的输入.我们从基础一开始做起,这里不使用任何UI框架,用react自身来实现对Form表单的控制. 1.基础按钮 import React from 'react'; const content = document.createElement('div'); document.body.appendChild(content); module.exports = class extends React.Component {
react 封装通用组件之form表单
weixin_44160385的博客
07-13 6942
react 常用组件API调用的模块化封装–form组件 工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的...
关于react的form
leileibuluo的博客
09-14 889
react作为主流框架之一,其中from作为其中最重要的模块,关于其个更为便利的用法,熟练应用会大大减少工作时间。
React从0到1封装一个Form表单
量子前端的博客
07-09 1374
博主最近在做组件库封装开发的工作，Form表单比较复杂，包含非受控表单和受控表单，特此记录一下。封装好的Form表单涵盖了布局、非受控、受控、校验、重置等功能。首先我们先做一个架子，也就是简单的非受控表单，也就是生成基础布局，不做表单内容（状态）的处理，我是一共写了两个组件，分别为Form和Form.Item，基本的使用代码是这样的： 效果是这样的：其实props也很好分了，Form的props用来做整体的一些控制，如这里的layout就是布局，以及style整体样式；Form.Item的props则对单行
React表单
qq_39233028的博客
11-08 956
1.react提交文本框 render() { return ( <div> <form onSubmit={this.handleSubmit}> 用户名:<input type='txt' value={this.state.name} onChange={this.handleName}> ..
06 React表单详解 约束性和非约束性组件 以及获取表单的内容
最新发布
03-01
首先，我们要了解React表单的两种基本处理方式：约束性和非约束性组件。 **1. 约束性组件（Controlled Components）** 在React中，约束性组件是表单状态由React控制的组件。这意味着表单元素的值总是与组件的状态...
基于React实现表单数据的添加和删除详解
08-31
"基于React实现表单数据的添加和删除详解" React是Facebook开发的一款开源JavaScript库，用于构建用户界面。它基于组件的概念，允许开发者将UI分解为独立、可重用的组件，从而提高代码的可维护性和可读性。React中...
React全家桶PDF讲解
11-01
React提供了受控组件和非受控组件的概念来处理表单数据，受控组件通过事件处理函数控制输入值，而非受控组件则允许更自由的输入行为。 组件之间的通信是React应用中重要的部分。父子组件间通信通常通过属性传递，非...
Vue和React组件之间的传值方式详解
01-19
在现代的三大框架中，其中两个Vue和React框架，组件间传值方式有哪些？ 组件间的传值方式 组件的传值场景无外乎以下几种： 父子之间 兄弟之间 多层级之间（孙子祖父或者更多） 任意组件之间 父子之间 Vue Vue是...
React之Form表单封装
Welkin_qing的博客
09-02 2586
文章目录一、form表单封装之树形选择框封装1. 代码结构（1）html代码（2）树形选择框的结构（3）css（4）转化函数2. 使用方法（1）单独使用（2）和form表单一起使用二、form表单之时间范围选择器封装1. 代码（1）html代码2. 使用方法（1）单独使用（2）在form表单中使用三、form表单封装1. 代码（1）html（2）数据结构（3）css2. 使用方法（1）导入该组件（2）表单提交方法a. 使用了时间选择框b. 没有使用时间选择框（3）formData数据(4)其他 前提说一下，
React form 表单组件的解决方案
web前端开发
02-05 3504
来源 |https://imweb.io/topic/5ca03c119239213a22d7549d一直以来，表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说，主要...
React利用Antd的Form组件实现表单功能
热门推荐
GuanJdoJ的博客
10-23 2万+
========2023.2.17更新======== 现在ant.design已进入V5版本，表单基础用法和V4基本一致，代码示例如下：
React的form表单提交
qq_42957741的博客
12-04 7869
包括了表单里input radio select checkbox textarea form 等一些操作， import React,{Component} from 'react'; class Reactform extends Component { constructor(props) { super(props); this.s...
使用react+antd3开发的复杂、超大数据量级的form表单
weixin_57185351的博客
02-28 1527
本方案肯定不是最佳实践，从产品层面到代码层面都有优化的空间。因为当时在需求评审时，由于疏忽，没有和pm确认该页面的数据量级，以至于在提测之后才知道该页面需要承载的压力之大，所以各方均没有时间再做大量的改造，只能从现有的代码上尽力做下优化。一个嵌套了多个子层级，每一个层级均具有动态增、删、上移、下移、复制功能的form表单，且该表单也支持回显编辑再提交。面对这种大数据量的表单功能，开发时应该注意：1.细化form表单结构；2.细化数据；3.增加判断或使用hooks，减少不必要的重复渲染。
学习React特征（四） - React Form 单向数据流
老司机的后备箱
12-13 161
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
form表单_基于React实现高度简洁的Form表单方案
weixin_39633976的博客
11-19 467
最近项目里在做我们自己的组件库，关于表单这块，如何实现一个更简单的表单方案，是我们一直在讨论的问题，之前项目里习惯用 ant-design 的 Form 表单，也觉得蛮好用的，我们希望能做出更简洁的方案。下面列出了表单相关的解决方案，React 社区的轮子真是多到无法想象：飞冰表单解决方案 - Ice FormBinderReact 实现高度简洁的 Form 组件NoForm - 一个更好的表单解...
如何设置好看的form表单样式_React form 表单组件的解决方案
weixin_39924307的博客
11-20 1952
来源 |https://imweb.io/topic/5ca03c119239213a22d7549d一直以来，表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说，主要需要考虑以下三点：各个元素如何排版布局管理各个元素的值表单验证(即时校验及提交的全部校验)目前已经有了一批优秀的 form 表单解决方案，但是要解决上述的三大问题，都比较费劲，于是搞了个react-fo...
React 事件详解：键盘、触摸、表单等
"React事件处理详解" 在React中，事件处理是构建用户交互界面的关键部分。React使用与浏览器原生事件不同的事件系统，这使得它更易于管理组件的状态和行为。以下是对React事件处理和相关JavaScript事件的详细介绍：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值