摘要:背景在的方法中使用来保存的话,会导致输入卡顿,原因是用户在输入时,一直在,导致整个页面一直重新渲染主页面解决方法将组件多带带封装成一个组件,这样就只会触发自身重新渲染而不是整个页面组件主页面发送内容发送这样就可以让用户愉快地输入的同时,的值啦
背景:
在的onChange方法中使用setState来保存value的话,会导致输入卡顿,原因是用户在输入时,一直在setState,导致整个页面一直重新渲染
主页面:
import React, { Component, } from "react"; import { Input } from "antd"; const { TextArea } = Input; class CustomCompent extends Component { constructor(props) { super(props); this.state = { targetValue: "", }; } handleChange = e => { let targetValue = e.target.value; this.setState({ targetValue, }); }; render() { const { targetValue } = this.state; return ( <> xxxx xxxx{targetValue.length}/100
> );}
解决方法:
将组件多带带封装成一个组件(component),这样就只会触发自身重新渲染而不是整个页面!
TextArea 组件:
import React from "react"; import { Input } from "antd"; const { TextArea } = Input; class CountTextArea extends React.PureComponent { constructor(props) { super(props); this.state = { targetValue: "", }; } handleChange = value => { let targetValue = value.target.value; this.setState({ targetValue, }); }; render() { const { setRef } = this.props; const { targetValue } = this.state; return ( <>{targetValue.length}/100
> ); } } export default CountTextArea;
主页面:
import React, { Component, } from "react"; import { Button } from "antd"; import CountTextArea from "./CountTextArea"; class CustomCompent extends Component { componentDidMount() { this.customTextArea = React.createRef(); } handleOk = () => { if (this.customTextArea && this.customTextArea.current) { //发送内容 let value =this.customTextArea.current.textAreaRef.value //xxx } } render() { return ( <>> ); } }
这样就可以让用户愉快地输入的同时,setState textarea 的值啦~
(完)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/109639.html
摘要:受控输入框只会显示通过传入的数据。例如,数组中的元素将会渲染三个单选框或复选框。属性接收一个布尔值,用来表示组件是否应该被渲染成选中状态。 原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输入框 单选框 复选框 文本域 下拉...
摘要:传入一个对象的时候,这个对象表示该组件的新状态。下一节中我们将介绍小书配置组件的。 React.js 小书 Lesson10 - 组件的 state 和 setState 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson10 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/bo...
摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...
阅读 1405·2021-11-25 09:43
阅读 2259·2021-09-27 13:36
阅读 1114·2021-09-04 16:40
阅读 1957·2019-08-30 11:12
阅读 3307·2019-08-29 14:14
阅读 564·2019-08-28 17:56
阅读 1319·2019-08-26 13:50
阅读 1245·2019-08-26 13:29