这次给大家带来React中表单使用详解,React中表单使用的注意事项有哪些,下面就是实战案例,一起来看一下。
表单
React 是个单向数据流的框架,所以在表单元素与其它 DOM 元素有所不同,而且和双向绑定的框架在操作上也有很大不一样。所以在这里单独拿出来说。
输入受控
import React from 'react' import ReactDOM from 'react-dom' class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'Hello React' } } render(){ return ( <p> <p><label>写死value-锁定状态</label><input type="text" value="hello react"/></p> <p><label>动态value-锁定状态</label><input type="text" value={this.state.text}/></p> <p><label>不指定value-没锁状态</label><input type="text"/></p> </p> ) } } ReactDOM.render(<Component1 />, document.getElementById('p1'));
这个案例说明了在 React 在表单元素因单向数据流所以在 value 给定后就无法再次修改,所以需要配合 <a href="http://www.php.cn/wiki/1464.html" target="_blank">onChange</a>
事件来完成。所以上面的案例应该是这样的
class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'Hello React' } } change = (e) => { this.setState({text: e.target.value}) } render(){ return ( <p> <p><label>写死value-锁定状态</label><input type="text" value="hello react" onChange={this.change}/></p> <p><label>动态value-没锁状态</label><input type="text" value={this.state.text} onChange={this.change}/></p> <p><label>不指定value-没锁状态</label><input type="text"/></p> </p> ) } }
效果预览
textarea 元素
在普通 HTML 中,textarea
元素是节点文本值
<textarea> Hello there, this is some text in a text area </textarea>
但在 React 中,该元素需要使用 value
属性。
class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'Hello React' } } change = (e) => { this.setState({text: e.target.value}) } render(){ return ( <p> <textarea value={this.state.text} onChange={this.change}/> </p> ) } }
select 元素
在普通 HTML 中, select
元素要指定默认选中值,就得在对应的option
中加上属性selected
<select> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option selected value="coconut">Coconut</option> <option value="mango">Mango</option> </select>
但在 React 中,只需要给定属性value
即可
class Component1 extends React.Component{ constructor(props){ super(props) this.state = { text: 'lime' } } change = (e) => { this.setState({text: e.target.value}) } render(){ return ( <p> <select value={this.state.text} onChange={this.change}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> </p> ) } }
input file 元素
因为<input type="file">
是特殊的元素,它是只读的,所以在 React 中需要用ref
来进行特殊处理
class Component1 extends React.Component{ submit = (e) => { console.log(this.file.files) } render(){ return ( <p> <input type='file' ref={input => {this.file = input}}/> <input type="button" value="submit" onClick={this.submit} /> </p> ) } }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是React中表单使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版

Dreamweaver Mac版
视觉化网页开发工具