摘要：首次发表在个人博客受控组件或都要绑定一个事件每当表单的状态发生变化都会被写入组件的中这种组件在中被称为受控组件在受控组件中组件渲染出的状态与它的或者向对应通过这种方式消除了组件的局部状态是的应用的整个状态可控官方同样推荐使用受控表单组件总结
受控组件首次发表在个人博客
{
this.setState({
value: e.target.value.toUpperCase(),
});
}}
/>
或都要绑定一个change事件;每当表单的状态发生变化,都会被写入组件的state中,这种组件在React中被称为受控组件;在受控组件中,组件渲染出的状态与它的value或者checked prop向对应.react通过这种方式消除了组件的局部状态,是的应用的整个状态可控.react官方同样推荐使用受控表单组件,总结下React受控组件更新state的流程:
1.可以通过初始state中设置表单的默认值;
2.每当表单的值发生变化时,调用onChange事件处理器;
3.事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state.
4.setState触发视图的重新渲染,完成表单组件值得更新
非受控组件react中数据是单向流动的.从示例中,我们能看出来表单的数据来源于组件的state,并通过props传入,这也称为单向数据绑定.然后,我们又通过onChange事件处理器将新的表单数据写回到state,完成了双向数据绑定.
如果一个表单组件没有value props(单选按钮和复选按钮对应的是 checked props)时,就可以称为非受控组件;
使用defaultValue和defaultChecked来表示组件的默认状态;
通过 defaultValue和defaultChecked来设置组件的默认值,它仅会被渲染一次,在后续的渲染时并不起作用
import React, { Component } from "react";
class UnControlled extends Component {
handleSubmit = (e) => {
console.log(e);
e.preventDefault();
console.log(this.name.value);
}
render() {
return (
);
}
}
export default UnControlled;
对比受控组件和非受控组件
将输入的字母转化为大写展示
{
this.setState({
value: e.target.value.toUpperCase(),
});
}}
/>
直接展示输入的字母
{
this.setState({
value: e.target.value.toUpperCase(),
});
}}
/>
1.性能上的问题
在受控组件中,每次表单的值发生变化,都会调用一次onChange事件处理器,这确实会带来性能上的的损耗,虽然使用费受控组件不会出现这些问题,但仍然不提倡使用非受控组件,这个问题可以通过Flux/Redux应用架构等方式来达到统一组件状态的目的.
2.是否需要事件绑定使用受控组件需要为每一个组件绑定一个change事件,并且定义一个事件处理器来同步表单值和组件的状态,这是一个必要条件.当然,某些情况可以使用一个事件处理器来处理多个表单域
import React, { Component } from "react";
class Controlled extends Component {
constructor(...args) {
super(...args);
this.state = {
name: "xingxing",
age: 18,
};
}
handleChange = (name, e) => {
const { value } = e.target;
this.setState({
[name]: value,
});
}
render() {
const { name, age } = this.state;
return (
);
}
}
export default Controlled;
表单组件的几个重要属性
1.状态属性
React的form组件提供了几个重要的属性,用来显示组件的状态
value: 类型为text的input组件,textarea组件以及select组件都借助value prop来展示应用的状态
checked: 类型为radio或checkbox的组件借助值为boolean类型的selected prop来展示应用的状态
selected: 该属性可作用于select组件下面的option上,React并不建议这种方式表示状态.而推荐在select组件上使用value的方式
2.事件属性当状态属性改变时会触发onChange事件属性.受控组件中的change事件与HTML DOM中提供的input事件更为类似;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92081.html
摘要：假如我们从后台拉取一个数据要填入输入框，那么必须得使用受控组件，因为非受控组件只能被用户输入。不影响正常输入填充该输入框的默认值，此时不显示内容。 网页中使用的form表单大家肯定都再熟悉不过了，它主要作用是用来收集和提交信息。React中的表单组件与我们普通的Html中的表单及其表现形式没有什么不同，所以如何使用表单我觉得再拿出来说可能是画蛇添足、毫无意义。不过再怎么样也不能辜负大家...
摘要：受控组件与非受控组件在官网与国内网上的资料都不多，有些人觉得它可有可不有，也不在意。受控组件与非受控组件是处理表单的入口。认为不能单独存在，需要与等控制的属性或事件一起使用。它们共同构成受控组件，受控是受的控制。 受控组件与非受控组件在官网与国内网上的资料都不多，有些人觉得它可有可不有，也不在意。这恰恰显示React的威力，满足不同规模大小的工程需求。譬如你只是做ListView这样简...
摘要：盘点一下，模式反应了典型的控制权问题。异步状态管理与控制权提到控制权话题，怎能少得了这样的状态管理工具。状态管理中的控制主义和极简主义了解了异步状态中的控制权问题，我们再从全局角度进行分析。 控制权——这个概念在编程中至关重要。比如，轮子封装层与业务消费层对于控制权的争夺，就是一个很有意思的话题。这在 React 世界里也不例外。表面上看，我们当然希望轮子掌控的事情越多越好：因为抽象层...
摘要：盘点一下，模式反应了典型的控制权问题。异步状态管理与控制权提到控制权话题，怎能少得了这样的状态管理工具。状态管理中的控制主义和极简主义了解了异步状态中的控制权问题，我们再从全局角度进行分析。 控制权——这个概念在编程中至关重要。比如，轮子封装层与业务消费层对于控制权的争夺，就是一个很有意思的话题。这在 React 世界里也不例外。表面上看，我们当然希望轮子掌控的事情越多越好：因为抽象层...
摘要：盘点一下，模式反应了典型的控制权问题。异步状态管理与控制权提到控制权话题，怎能少得了这样的状态管理工具。状态管理中的控制主义和极简主义了解了异步状态中的控制权问题，我们再从全局角度进行分析。 控制权——这个概念在编程中至关重要。比如，轮子封装层与业务消费层对于控制权的争夺，就是一个很有意思的话题。这在 React 世界里也不例外。表面上看，我们当然希望轮子掌控的事情越多越好：因为抽象层...
阅读 1529·2021-08-13 15:03
阅读 1831·2019-08-30 15:54
阅读 3396·2019-08-26 10:30
阅读 897·2019-08-26 10:22
阅读 2629·2019-08-23 14:42
阅读 1703·2019-08-22 11:16
阅读 915·2019-08-21 18:33
阅读 3038·2019-08-21 17:28
