标签：state 保留字 inpu 原理 部分 没有 返回 UI 控制
不太清楚有多少初学React的同学和博主当时一样，在看完React的生命周期、数据流之后觉得已经上手了，甩开文档啪啪啪的开始敲了起来。结果...居然被一个input标签给教做人了。
故事是这样的：首先你创建了一个input标签
var React = require(‘react‘),
ReactDOM = require(‘react-dom‘);
var Test = React.render(function() {
render: function() {
return (<input type="text" />);
}
});
ReactDOM.render(<Text />, document.querySelector(‘#container‘));
一切都是如此的轻松自然，接着由于需求你给input上设置了一个默认值：
<input value=‘123‘ type=‘text‘ />
突然你发现，唉我擦！输入框里的值不能改动了，删也删不掉。你以为电脑卡死了，刷新了几遍还是这样。然而把value删除就复原了，你不得不又返回去看文档。
原理：在React中表单组件分为约束组件和无约束组件两种。
- 无约束组件，是指其value值不通过的props或者state来设置，仅由其自身来决定。表单组件的值的变化也不会被记录，只能通过找到DOM节点的方式来获取。
- 约束组件，是React中推荐的表单的使用方式。表单组件的值并不是由其自身决定，而是通过父组件传递或者本身的state来控制。其内容的每次变化都会被保存，需要时仅需要通过this.state便能获取。
约束状态的input组件写法如下：
class Test extends React.Component{
constructor(props){
super(props);
this.handerChange = this.handerChange.bind(this);
}
handerChange(event){
let newVal = event.target.value;
console.log(newVal);
this.setState({
text:newVal
});
}
render(){
return (
<input type="text" value={this.props.text} onChange={this.handerChange}/>
);
}
}
ReactDOM.render(<Test/>,document.getElementById(‘example‘))
上例中，我们监听了input的onchange事件，每一次内容的更改实际上是更改组件的state属性，通过state的变化来触发DOM元素的变化。
React之所以这么做的原因，是因为React其实为一个状态机，页面上所有的DOM元素的状态都需要被其所知所控制。
在继续理解表单组件之前，组件的state是必须被开发者所理解的。通常很多人喜欢将state与props一起讲解，这里博主认为通过state在表单组件的实际应用讲解可能更加直观。
State
每一本介绍React的书或文档都会把state和props放在一起详细的比较，其实最简单的说：state是组件内部用来控制组件状态的属性，props是组件之间用来通信的属性。
创建
state是通过名为getInitialState的生命周期函数创建的，其return出一个对象作为state值。如果你申明了该函数却没有返回值是会报错的。
创建之后，在组件内部的所有函数都可以用 this.state.属性名 来访问该属性。
修改
state的值并不是固定的，开发都通过在合适的时机改变它从而达到改变页面展示的目的。
改变state的唯一是this.setState，该方法可以说是整个React系统的"扳机"，正常情况(除了直接操作DOM)下所有的页面更新都是由这个方法来触发的。
class Test extends React.Component{
constructor(props){
super(props);
this.state = {
text: "init text",
}
this.handerChange = this.handerChange.bind(this);
}
handerChange(event){
let newVal = event.target.value;
this.setState({
text:newVal
});
}
render(){
return (
<input type="text" value={this.state.text} onChange={this.handerChange}/>
);
}
}
ReactDOM.render(<Test/>,document.getElementById(‘example‘))
这里就是有关state很重要的一点：绝对不要直接更改state的值，只通过setState来改变。否则会因为多个地方多次对state更改，导致不统一。从而引发一些不必要的问题。
当state里有多个属性，如果需要更新某一个组件不用更新state里所有的属性，只更新需要的就好：
{name: ‘lilei‘, age: 25, sex: ‘男‘} //state
this.setState({name: ‘hanmeimei‘, sex: ‘女‘}); //state:{name: ‘hanmeimei‘, age: 25, sex: ‘女‘}
更新时机
既然setState是React的扳机，那它就不能随便在哪里都开枪。可能这部分东西需要对React的生命周期有一定掌握，许多文档和博客里都写得很详细。我这里就不再抄书了。
通常调用setState都是在人工触发的事件里，比如上例中的handlerClick。但总有需要自动触发的情形。生命周期主要分为创建、更新和销毁三个阶段。
- 首先，在任何阶段的render函数里都是不可以调用setState来触发更新的。
- 创建阶段，一般是在componentWillMount以及componentDidMount这两个生命周期函数中调用，前者表示React即将渲染真实DOM前的一个阶段，也是最后的修改state的机会。后者表示真实DOM已经渲染完成，在页面中能看到我们的组件了，这里再调用setState就会触发组件的一次更新。在实际开发中通常用在下面这种情况：(下面是es5的写法)
var Foo = React.createClass({
getInitialState:function() {
return {....};
},
render: function() {
return (<..../>);
},
componentDIdMount: function(){
AJAX {
this.setState({....});
}
}
});
大意就是首先创建出页面元素，在componentDidMount函数中发起ajax之类的请求，获取数据后通过setState更新页面将数据更新到页面中。
这样做的好处就是在请求较慢或者请求失败的情况下，页面不至于留白，影响用户体验。
- 更新阶段，绝...对...不...要...在...这...个...阶...段...调...用。因为如果在该阶段任意一个生命周期函数中使用setState触发页面更新时，组件又会再次进入生命周期的更新阶段，这里会再次调用setState方法，然后进入死循环。
- 销毁阶段，就更不用说了，组件都没得了，还更新个毛啊。
了解完了state，继续看input的无约束组件。
<input defaultValue="123" />
如果设置了defaultValue属性，该组件就是无约束组件。此时可以直接设置input的默认值，设置之后内容可以直接进行更改。缺点是这个属性貌似只能设置一次，重复设置无效。
如果你不想为约束组件编写如上那些繁琐的过程，React提供了简单的方法——mixin。
mixin
简单来说mixin是用来抽象某一功能的工具，将逻辑抽象出来，使其可以在多个组件里复用。除了自定义以外，官方已经封装了一系列的mixin组件，使用前需要引入react-with-addons文件。
var Form = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {userName: ‘‘, passWord: ‘‘};
},
render: function() {
return (<div>
<form>
<input type=‘text‘ valueLink={this.linkState(‘userName‘)} placeholder=‘用户名‘ />
<input type=‘password‘ valueLink={this.linkState(‘passWord‘)} placeholder=‘密码‘ />
</form>
</div>);
}
});
如上引入mixin组件后，只需要在input的特殊属性valueLink中调用this.linkState(‘属性名‘)，之后每次对input内容的更改就会同步到组件state中同名的属性中。
其实LinkedStateMixin内部的实现跟我们Test那个示例组件里是一样的，看懂了那段代码就能理解这个mixin插件的内部原理了。
*虽然使用mixin可以简化书写流程，但是使用这种方式往数据流中添加定制功能时，复杂度会增加，建议只在特定场景下使用。传统的约束表单组件更加灵活。
下面介绍下其他表单组件的内容
Label
label元素是表单中很重要的一个部分，由于for在JavaScript中是一个保留字，所以在JSX中for属性更改为htmlFor。
<label htmlFor=‘name‘>姓名</label>
Textarea
与传统的HTML相比，在React中，textarea被修改为更像input的形式。
<textarea value={this.state.value} />
textarea的约束组件的使用方法与input一致，同时也可以使用同一个mixin。
<textarea valueLink={this.linkState(‘value‘)} />
使用defaultValue属性同样可以将textarea变为无约束组件。
<textarea defaultValue=‘请输入内容‘ />
Select
在React中select与textarea一样，相比HTML也作了一些修改，使它们操作起来更简便。
无约束组件：
<select defaultValue=‘B‘> <option value=‘A‘>AAA</option> <option value=‘B‘>BBB</option> <option value=‘C‘>CCC</option> </select>
约束组件：
var SelectComponent= React.createClass({
getInitialState: function() {
return {option: ‘A‘};
},
render: function() {
return (<select value={this.state.option} onChange={this.handlerChange}>
<option value=‘A‘>A</option>
<option value=‘B‘>B</option>
<option value=‘C‘>C</option>
</select>);
},
handlerChange: function(event) {
this.setState({option: event.target.value});
}
单选
约束组件：
var Radio = React.createClass({
getInitialState: function() {
return {gender: ‘男‘};
},
render: function() {
return (<div>
<input type=‘radio‘ name=‘gender‘ value=‘男‘ checked={this.state.sex == ‘男‘} onChange={this.handlerChange} />男
<input type=‘radio‘ name=‘gender‘ value=‘女‘ checked={this.state.sex == ‘女‘} onChange={this.handlerChange} />女
</div>);
},
handlerChange: function(event) {
this.setState({gender: event.target.value});
}
});
设置单选的defaultChecked会使其变为无约束组件。
<input type=‘radio‘ defaultChecked=‘true‘ />
复选
约束组件：
var CheckBox = React.createClass({
getInitialState: function() {
return {basketBall: false, swim: false, sing: false};
},
render: function() {
return (<div>
<p>爱好：</p>
<input type=‘checkbox‘ checked={this.state.basketBall} value=‘basketBall‘ onChange={this.handlerChange} />篮球
<input type=‘checkbox‘ checked={this.state.swim} value=‘swim‘ onChange={this.handlerChange} />游泳
<input type=‘checkbox‘ checked={this.state.sing} value=‘sing‘ onChange={this.handlerChange} />唱歌
</div>);
},
handlerChange: function(event) {
var type = event.target.value,
checked = event.target.checked,
newState = {};
newState[type] = checked;
this.setState(newState);
}
});
在handlerCheck函数中有一点要注意，我创建了一个中间变量newState。
handlerCheck: function(event) {
var type = event.target.value,
checked = event.target.value;
this.setState(type: checked); //state: {basketBall: false, swim: false, sing: false, type: true}
}
如果像上面的写法，type并不会作为变量，而是作为字符串解析。每当你在setState时遇到困难时，尝试中间变量，这方法百试不爽。
无约束组件：
<input type=‘checkbox‘ defaultChecked=‘true‘ />
多表单元素与change事件处理
在实际开发中通常有多个表单组件，为了使一个change处理器能处理所有的表单组件变化，可以使用bind方法来绑定类型。
var FormComponent = React.createClass({
getInitialState: function() {
return {name: ‘‘, gender: ‘男‘};
},
render: function() {
return (<form>
<input type=‘text‘ value={this.state.name} onChange={this.handlerChange.bind(this,‘name‘)} />
<label htmlFor=‘male‘>男</label>
<input id=‘male‘
name=‘gender‘
type=‘radio‘
value=‘男‘
checked={this.state.gender == ‘男‘}
onChange={this.handlerChange.bind(this,‘gender‘)} />
<label htmlFor=‘female‘>女</label>
<input id=‘female‘
name=‘gender‘
type=‘radio‘
value=‘女‘
checked={this.state.gender == ‘女‘}
onChange={this.handlerChange.bind(this,‘gender‘)} />
</form>);
},
handlerChange: function(type, event) {
var newState = {};
newState[type] = event.target.value;
this.setState(newState);
}
});
表单是React初学者很容易踩的大坑，但是对表单组件的学习可以很快的理解state属性。
转载：http://www.cnblogs.com/ghost-xyx/p/5253567.html
标签：state 保留字 inpu 原理 部分 没有 返回 UI 控制
原文地址：http://www.cnblogs.com/yeziTesting/p/7352740.html
