摘要：对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。约束性和非约束性组件表单里面出来了一个新的概念叫约束性组件。这样写出的来的组件，其值就是用户输入的内容，完全不管理输入的过程。约束性组件显示的是的值。
表单是前端非常重要的一块内容，并且往往包含了错误校验等逻辑。
React对表单元素做了专门的优化处理，他对表单元素做了一些抽象，使得他们的使用方式更统一更规范。
表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。
约束性组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的。
他们的写法上也有很大区别。
这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。
而约束性组件是这么写的：//...省略部分代码
handleChange: function(e) {
this.setState({name: e.target.value});
}
这里，value属性不再是一个写死的值，他是 this.state.name，而 this.state.name 是由 this.handleChange 负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程，实际它依然是通过设置input的value来实现的。
但是一定要注意，约束性组件显示的值和用户输入的值虽然很多时候是相同的，但他们根本是两码事。约束性组件显示的是 this.state.name 的值。你可以在handleChange中对用户输入的值做任意的处理，比如你可以做错误校验。
对比约束性组件和非约束性组件的输入流程：非约束性组件： 用户输入A -> input 中显示A
约束性组件： 用户输入A -> 触发onChange事件 -> handleChange 中设置 state.name = “A” -> 渲染input使他的value变成A
正式因为这样，强烈推荐使用约束性组件，因为它能更好的控制组件的生命流程。
React 把 input,textarea 和 select 三个组件做了抽象和封装，他们的用法变得非常统一，你基本上可以当做同一个组件来用。
他们现在有统一的 value 属性 和 onChange 事件，现在对于这三种组件你都可以这样写
不过 chekbox有和上面三个不一样，因为checkbox改变的不是 value ，而是 checked 状态。
你可以这样写：
一个示例
下面是一个包含了 input,textarea, select, radio 的表单，并且做了简单的校验：
var MyForm = React.createClass({
getInitialState: function() {
return {
email: "",
intro: "",
city: "hz",
male: true, //性别
emailError: "",
introError: ""
};
},
handleEmail: function(e) {
var value = e.target.value;
var error = "";
if(!(/^[a-zA-Z0-9.!#$%&"*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
error = "请输入正确的Email";
}
this.setState({
email: value,
emailError: error
});
},
handleIntro: function(e) {
var value = e.target.value;
var error = "";
if(value.length < 10) {
error = "介绍不能少于十个字";
}
this.setState({
intro: value,
introError: error
});
},
handleCity: function(e) {
var value = e.target.value;
this.setState({
city: value,
});
},
handleGender: function(e) {
var male = !!(e.target.value == "MALE");
this.setState({
male: male
});
},
render: function() {
return (
{this.state.emailError}
{this.state.introError}
)
}
});
React.render(
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82155.html
摘要：受控输入框只会显示通过传入的数据。例如，数组中的元素将会渲染三个单选框或复选框。属性接收一个布尔值，用来表示组件是否应该被渲染成选中状态。 原文地址：React.js Forms: Controlled Components 原文作者：Loren Stewart 译者：小 B0Y 校对者：珂珂君 本文涵盖以下受控组件： 文本输入框 数字输入框 单选框 复选框 文本域 下拉...
摘要：假如我们从后台拉取一个数据要填入输入框，那么必须得使用受控组件，因为非受控组件只能被用户输入。不影响正常输入填充该输入框的默认值，此时不显示内容。 网页中使用的form表单大家肯定都再熟悉不过了，它主要作用是用来收集和提交信息。React中的表单组件与我们普通的Html中的表单及其表现形式没有什么不同，所以如何使用表单我觉得再拿出来说可能是画蛇添足、毫无意义。不过再怎么样也不能辜负大家...
摘要：本文发布于我的博客最近对团队内部组件库中的组件进行了重构，记录一下思考的过程。暴露对外提供整个表单状态的方法通过在外监听每次触发的事件来获取整个的状态。子表单数量或类型发生变化时当下面子组件被添加或删除时，需要及时更新的结构。 本文发布于 我的博客 最近对团队内部 React 组件库（ne-rc）中的 Form 组件进行了重构，记录一下思考的过程。 一些前置定义： 名词 定义 ...
摘要：首次发表在个人博客受控组件或都要绑定一个事件每当表单的状态发生变化都会被写入组件的中这种组件在中被称为受控组件在受控组件中组件渲染出的状态与它的或者向对应通过这种方式消除了组件的局部状态是的应用的整个状态可控官方同样推荐使用受控表单组件总结 首次发表在个人博客 受控组件 { this.setState({ value: e.target.val...
摘要：我们可以使用函数构造函数将我们的组件转换为状态什么是函数构造函数在中，函数是一个在创建对象时运行的函数。我们将使用构造函数方法在对象创建时正确运行对象时设置实例变量。每当一个有一个属性被设置时，它会在该字段改变的每个时间调用函数。 本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3823原文：https://www.fullsta...
阅读 2433·2021-11-02 14:39
阅读 3937·2021-10-11 10:58
阅读 1104·2021-09-06 15:12
阅读 1578·2021-09-01 10:49
阅读 1188·2019-08-29 18:31
阅读 1780·2019-08-29 16:10
阅读 3181·2019-08-28 18:21
阅读 719·2019-08-26 10:42
