8 Reactjs 表单

╰+哭是因爲堅強的太久メ 2023-02-27 08:10 10阅读 0赞

**受控组件**

受控组件：

<input value=\{this.state.inputvalue\} onChange=\{(e)=>\{this.setState(\{

inputvalue: e.target.value

\})\}\}>

非受控组件：<input>

受控组件即通过state控制元素的值

一个简单的状态跟新

//构造函数初始状态

constructor(props)\{

super(props);

this.state = \{

AccountIDL:"",

\}

\}

//控件更新状态

<input  value=\{this.state.AccountIDL\} onChange=\{(event)=> this.setState(\{AccountIDL: event.target.value\})\}  type="text" />

.........

**file input 标签**

文件标签比较特殊，以下示例显示了如何通过 ref 来访问提交处理程序中的文件：

class FileInput extends React.Component \{

constructor(props) \{

super(props);

this.handleSubmit = this.handleSubmit.bind(this);

\}

handleSubmit(event) \{

event.preventDefault();

alert(this.fileInput.files\[0\].name);

\}

render() \{

return (

<input type="file" ref=\{  input => \{  this.fileInput = input; \} \} />

);

\}

\}

**受控 Input 组件的 null 值**

在 受控组件 上指定值 value 的值为null可防止用户更改输入，除非您希望如此。

**受控组件的替代方案**

有时使用受控组件有些乏味，因为你需要为每一个可更改的数据提供事件处理器，并通过 React 组件管理所有输入状态。当你将已经存在的代码转换为 React 时，或将 React 应用程序与非 React 库集成时，这可能变得特别烦人。在这些情况下，您可能需要使用[不受控的组件][Link 1]，用于实现输入表单的替代技术。

[Link 1]: http://www.css88.com/react/docs/uncontrolled-components.html

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactJS入门

目录一：前端开发的演变二：ReactJS简介三：搭建环境四：React快速入门 -------------------- 一：前端开发的演变到目前

淡淡的烟草味﹌/ 2024年03月30日 12:28/ 0 赞/ 92 阅读

相关 Bootstrap表单及表单布局

Bootstrap4 支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。示例1（堆叠表单） ![在这里插入图片描述][b614b269291b45da

r囧r小猫/ 2023年09月24日 16:57/ 0 赞/ 93 阅读

相关 reactJs 基础

react不是一个完整的mvc,mvvm框架。 react跟web components 不冲突背景原理：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每

不念不忘少年蓝@/ 2023年08月17日 16:20/ 0 赞/ 158 阅读

相关表单

1、登录界面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2023年08月17日 16:10/ 0 赞/ 124 阅读

相关玩转Reactjs第五篇-基础知识(事件&条件&列表&表单)

一、前言其实在前面介绍组件的时候，已经用到了这些知识，本章节我们重点分析下，并与Vue的用法比较。二、事件 Reactjs中事件处理方式与原生态DOM

你的名字/ 2023年07月10日 05:05/ 0 赞/ 29 阅读

相关 8 Reactjs 表单

受控组件受控组件： <input value=\{this.state.inputvalue\} onChange=\{(e)=>\{this.setState(\{

╰+哭是因爲堅強的太久メ/ 2023年02月27日 08:10/ 0 赞/ 11 阅读

相关 Bootstrap教程(8)--使用表单样式

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. HTML表单样式 3. Bootstrap默认表单 4.

小咪咪/ 2022年10月31日 00:51/ 0 赞/ 213 阅读

相关 reactJs入门

本文中的react是老版本的，对于新版本只需要改两个地方： <!DOCTYPE html> <html> <head> <me

淩亂°似流年/ 2022年07月16日 03:14/ 0 赞/ 310 阅读

相关表单

表单创建 <form method="post" action="result.html"> <p> 名字：<input name="name

不念不忘少年蓝@/ 2022年03月10日 18:46/ 0 赞/ 408 阅读

相关表单

1.打开phpstudy 2.打开编辑器，我的是用phpstorm 所以我直接在C:\\phpStudy\\PHPTutorial\\WWW这个目录下建立了两个文件，一个是

梦里梦外;/ 2022年02月25日 03:42/ 0 赞/ 352 阅读