react响应用户输入

最新推荐文章于 2024-07-09 12:36:55 发布
最新推荐文章于 2024-07-09 12:36:55 发布
阅读量640 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liying123466/article/details/79499746
版权 
<!DOCTYPE html>
<html>
<head>
	<title>react</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
		padding:0;
		margin:0;
	}
	#con{
		padding:50px;
		background-color: #FFF;
	}

	.color{
		box-shadow: 0px 0px 25px 0px #333;
		width:242px;
		height:242px;
		margin-bottom:15px;
	}
	.colorArea input{
		padding:10px;
		font-size:16px;
		border:2px solid #ccc;
	}

	.colorArea button{
		padding:10px;
		font-size:16px;
		margin:10px;
		background-color: #666;
		color:#FFF;
		border:2px solid #666;
	}

	.colorArea button:hover{
		background-color: #111;
		border-color: #111;
		cursor: pointer;

	}
</style>
	 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
  <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="con">
    	
    </div> 
    <script type="text/babel">
    	var desction = document.getElementById("con");

        var Colorize = React.createClass({
           getInitialState:function(){
              return{
                color:'',
                baColor:''
              }
           },
           colorValue:function(e){
               this.setState({
                  color:e.target.value
               })
           },
           setNewColor: function(e){
              this.setState({
                  bgColor:this.state.color
              });
              this._input.value="";
              this._input.focus();
              e.preventDefault();
           },
           render:function(){
                 var squareStyle={
                    backgroundColor: this.state.bgColor
                 };
                 var self = this;
                 return (
  					<div className="colorArea">
  						 <div style={squareStyle} className="color"></div>
  						 <form onSubmit={this.setNewColor} >
  						 <input 
  						 ref={function(el){
							self._input = el;
  						 }} placeholder="Please enter a color" 
  						 onChange={this.colorValue} />
  						 <button type="submit">show</button>
  						 </form>
  					</div>
                 )
           }
        })
    	ReactDOM.render(
    	   <div>
    	   	    <Colorize></Colorize>
    	   </div>,
    	   desction
    	)
    </script>
</body>
</html>

亲，你可以先在你的编译器上跑跑上面的代码。

上面的代码主要实现的功能就是：根据文本框里面输入的颜色值来改变另外一个<div>里面的颜色，并且在每一次变颜色之后就会将文本框里面的内容清空。

有没有觉得很神奇呢！下来就让我给你们说说我了解到的react吧！

1.React.createClass()这个方法就是用来构造组件的

2.给组件添加样式就是在render里面写json类型的东西，最后利用style={

你写的json}这样的话，就可以给组件里面添加样式了。

3.

ReactDOM.render(
    	   <div>
    	   	    <Colorize></Colorize>
    	   </div>,
    	   desction
    	)

对于上面的这一段代码来说，<div>里面添加的就是你写好的组件，desction就是挂在组件的对象。这里需要注意的就是其中的在ReactDOM.render将你写好的组件放在一个<div>里面，其中的逗号是一定不能省略的。

4.

 ref={function(el){
							self._input = el;
  						 }}

这一部分的代码通过其中的el来获取其中的js的对象，方便你的操作。

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

5.对于其中的this.state....这个是用来将父组件的东西传递给子组件的

6.this.setState这个是用来设置组件的属性的

7.getInitialState 对于这个和其他的不一样，这个是react里面自带的方法，这里是进行初始化的。一般情况下我们就是将那些初始化的东西写在这个里面

对于react最最重要的就是：当组件里面的内容发生改变的时候，react就会重新调用render函数来将组件重新构建的。

最后还要忠告的就是，在写react代码的时候，里面不能随便写注释，如果你把代码写完没有在浏览器上出现样式的话，最好检查一下你的标点符号。

liying123466
关注
专栏目录
react-react实现的搜索框
08-14
react实现的搜索框
react-reacttokeninput标签输入分割React组件
08-15
2. **事件处理**：React组件通过`onChange`、`onBlur`、`onFocus`等事件处理器来响应用户的交互。例如，当用户输入时，`onChange`事件会被触发，更新输入框的内容；当用户按下分隔符（通常是逗号或空格）时，新的...
React响应用户输入（持续更新）
weixin_33937778的博客
04-14 150
2019独角兽企业重金招聘Python工程师标准>>> ...
React基础学习-Day02
weixin_38647954的博客
07-09 1317
useEffect是 React Hooks 提供的强大工具，用于处理函数组件中的副作用操作。通过指定依赖项数组，可以精确控制 effect 的执行时机，避免不必要的重复执行，提高组件性能和可维护性。自定义 Hook 是 React 中的一个强大功能，它允许你将组件逻辑提取到可复用的函数中。自定义 Hook 的命名通常以use开头。我们将创建一个简单的自定义 HookuseCounter，它管理一个计数器的状态并提供增加和减少计数器的方法。
React用户输入案例
weixin_45663264的博客
10-18 186
用户输入案例 import React, { Component } from 'react' export default class name extends Component { constructor(props) { super(props) this.state = { surName: '', ...
react - input 输入框
mygoes
11-10 6527
input 输入框需求： 用户操作输入框时获取操作后的值。 import React, { Component } from 'react'; import { TextInput } from 'react-native'; export default class InviteScreen extends Component { constructor(props) { super(props); this.state = { pay.
React实现插入变量输入框
Hi-Sun的博客
04-20 731
本文提供一个插入变量组件，该组件可实现在输入框内插入固定格式的变量值，包含必要的校验，在文章末还提供一个联动插入变量输入模块的组件，该模块包含变量输入框模块+可编辑表格模块+预览模块
user-profile:using使用React的用户个人资料
05-13
综上所述，"user-profile"项目是一个综合运用React、Chakra-UI和JavaScript技术的用户个人资料应用，涵盖了文件上传、表单交互、状态管理、响应式设计等多个方面，展示了React在构建现代Web应用中的强大能力。...
react-pic-search：基于用户输入的简单React图片搜索
02-13
**React-Pic-Search：基于用户输入的React图片搜索组件** React-Pic-Search是一个用JavaScript编写的React组件，主要用于创建一个简单的图片搜索功能。它允许用户通过输入关键词来实时搜索并显示相关的图片。这个...
react-reacttagsinput一个用于标签输入的简单react组件
08-15
3. **实时输入验证**：可以设置验证规则，如最小字符数、最大字符数等，确保用户输入的有效性。 4. **键盘操作支持**：支持常用的键盘快捷键，如回车键添加标签，删除键或退格键移除标签。 5. **标签数据管理**：...
slack-surveyor:闲暇中的机器人用户会提出问题并通过React收集响应
05-09
7. **Botkit或slash commands**：为了使机器人能够接收和响应命令，slack-surveyor可能利用了Botkit库或者使用Slack的slash commands（/commands），这些功能让机器人能够理解并执行用户输入的特定指令。 8. **状态...
react 输入框编辑组件
宏斌的博客
05-27 513
import { FC, ReactElement, useState, useCallback, Fragment } from "react"; import styled from "styled-components"; import { betweenCenter, TextInput, Button } from "../../styled"; interface IProps {} const NicknameInput: FC<IProps> = (): ReactElem.
React实现添加多行输入框(点击一行增加一行)
见贤思齐焉，见不贤内自省
02-18 4469
有时候我们会碰到例如批量增加账号密码的需求，点击加一按钮，再出现一组账号密码的弹框。 如何实现呢？ 首先，有多组，是个不确定向，可能只添加了一组，但是也有可能连续添加七八组。 所以肯定是一个变量在控制显示多少个，肯定是循环出来的，每点击一次，这个长度增加1，列表循环出来的页面输入框加1。
react生成的表单不能键入问题的解决
KateCateCake的博客
11-04 4774
刚学react，用react做了一个表单，生成后却发现，input输入不了内容，经百度后，发现react生成的表单如果要重新渲染其中的value应该改变state才会重新渲染，所以要给input绑定onChange事件，具体实现如下所示：FormItem.jsclass FormItem extends React.Component { constructor(props) {
React获取input框输入值得俩种方法&&键盘事件&&双向数据绑定
qq_42957741的博客
11-30 1354
获取表单的值1 1. 监听表单的改变事件 onChange 2. 在改变的事件里面获取表单输入的值 event.target.value 3. 把表单输入的值赋值给username this.setState({}) 4. 点击按钮的时候获取state里面的usename */ this.state.name this.state={ ...
React入门第二天（函数式组件实现数据响应式，生命周期的监听）
做技术，坚持才是最重要的，一时的热情只是暂时的进步
03-09 2693
数据响应式 由于函数式组件没有 this 指向，导致无法获取到 setState，无法实现数据动态化 import React from 'react' import { useState } from 'react' export default function App4() { // Hook 只能用在组件函数中的最顶层 const [num1, setNum1] = useState(1); const [num2, setNum2] = useState(1);
React学习笔记（二）
qq_45243719的博客
02-05 1968
{show && <div>是否展示
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
热门推荐
编程知识分享，主打前端
09-24 3万+
大家好，我是yma16，本文分享关于前端react整合ckeditor——配置插件、自定义toolbar工具栏。react-grapesjs——开源代码学习与修改（初出茅庐）react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html【腾讯云 Cloud studio 实战训练营】搭建Next框架博客——抛开电脑性能在云端编程(沉浸式体验)博客搭建_react-markdown渲染内容博客搭建_登录注册博客搭建_初始化next项目关于ckeditor。
react数据响应式state
weixin_45966674的博客
09-02 1215
这里我们bind(this) 是将这个函数中的this声明为组件本身的this 不然在事件中拿到的this就会是触发事件的元素本身了 这是个this指向的问题 你们如果感兴趣就可以去了解一下。然后我们的increase函数中使用了 react提供的 setState函数 在这个函数里就可以响应式修改state中声明的值。我们界面中输出的1 就是我们在this.state中定义的numericalValue。而我们在函数中使用state中的值 也要 this.state.属性。
react 用户登录
最新发布
07-10
React 用户登录通常涉及以下几个步骤： 1. **组件设计**：创建登录界面，包括输入框用于用户名和密码，以及登录按钮。你可以使用`state`来管理用户的输入状态。 ```jsx class LoginForm extends React.Component { constructor(props) { super(props); this.state = { username: '', password: '' }; } handleInputChange = (e) => { this.setState({ [e.target.name]: e.target.value }); }; handleSubmit = (event) => { event.preventDefault(); // 这里会发送一个请求到服务器验证用户凭据 }; render() { return ( <form onSubmit={this.handleSubmit}> <input type="text" name="username" placeholder="用户名" onChange={this.handleInputChange} /> <input type="password" name="password" placeholder="密码" onChange={this.handleInputChange} /> <button type="submit">登录</button> </form> ); } } ``` 2. **表单提交**：当用户点击登录按钮时，`handleSubmit`函数会被触发，通过`axios`、`fetch`或其他网络库发送请求到后端服务器，包含用户名和密码数据。 3. **身份验证**：后端接收到请求后验证用户信息，如果验证成功，返回一个token或其他认证信息；如果失败，可能会返回错误码或消息。 4. **路由控制**：登录成功后，可以根据返回的信息设置存储在浏览器本地或使用cookie的session，然后利用`react-router-dom`库导航到受保护的页面。 5. **错误处理**：在处理过程中，应考虑异常情况，如网络中断、服务器响应错误等，并向用户显示适当的错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值